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图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 良知 
和 觉悟 ， 与 我 们 共同 保护 知识 产权 。 


如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 户 实 施 包括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 追究 法 律 
责任 。 


Nicolas Bevacqua 


JavaScript 开 源 社区 的 活跃 成 员 ， 自 由 Web 
开发 者 ， 关 注 模块 化 JavaScript、 构 建 过 程 
和 新 锐 设计 理念 ， 偶 尔 进行 公开 演讲 ， 还 是 
一 名 充满 激情 的 作家 。 他 维护 着 多 个 开源 项 
目 ， 还 开设 了 一 个 博客 ， 发 表 关 于 Web、 性 
能 、 渐 进 增强 和 JavaScript 开 发 相关 的 文 
章 ， 地 址 是 ponyfoo.com。Nicolas 现 在 和 他 
的 女友 玛丽 安 一 起 生活 在 阿根廷 布 宜 诺 斯 艾 
利 斯 。 








安道 
专注 于 现代 化 计算 机 技术 的 自由 译 者 ， 译 
有 《Flask Web 开 发 》《Ruby on Rails 教 程 》 
等 书 。 个 人 网 站 : http://about.ac。 
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内 容 提 要 


本 书 是 面向 一 线 开发 人 员 的 一 本 实用 教程 ， 对 最 新 的 Web 开发 技术 与 程序 进行 了 全 面 的 梳理 和 总 结 ， 
为 JavaScript 开发 人 员 提 供 了 改进 Web 开发 质量 和 开发 流程 的 最 新 技术 。 本 书 主要 分 两 大 块 ， 首 先是 以 构建 
为 目标 实现 JavaScript 驱动 开发 ， 其 次 介绍 如 何 管理 应 用 设计 过 程 中 的 复杂 度 ， 包 括 模块 化 MVC、 蜡 步 代 
码 流 、 测 试 以 及 API 设计 原则 。 

本 书 适合 各 层次 Web 开发 人 员 阅读 。 
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版 权 声明 


Original English language edition, entitled JavaScript Application Desiegn by Nicolas Bevacqua, 
published by Manning Publications. 178 South Hill Drive, Westampton, NJ 08060 USA. Copyright © 2015 
by Manning Publications. 

Simplified Chinese-language edition copyright © 2015 by Posts & Telecom Press. All rights reserved. 





本 书 中 文 简体 字 版 由 Manning Publications 授 权 人 民 邮 电 出 版 社 独 家 出 版 。 未 经 出 版 者 书面 许 
可 ， 不 得 以 任何 方式 复制 或 抄袭 本 书 内 容 。 
版 权 所 有 ， 侵 权 必 究 。 
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献 给 玛丽 安 ， 感 谢 你 无 条 件 的 爱 和 无 止境 的 耐心 ， 支 撑 我 写 完 这 本 书 。 
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序 





近 几 年 ， 开 发 强大 的 JavaScript Web 应 用 经 历 了 一 场 麦 万 烈 烈 的 复兴 。 人 们 对 JavaScript 寄 子 
厚望 ， 越 来 越 多 的 人 使 用 这 门 语 言 开 发 应 用 和 接口 ， 这 本 书 的 出 版 恰 逢 其 时 。 在 这 本 书 中 ，Nico 
Bevacqua 通 过 简洁 的 示例 、 这 个 领域 沉淀 下 来 的 经 验 教 训 ， 以 及 可 伸缩 性 开发 的 关键 概念 ， 向 我 
们 展示 了 如 何 改进 应 用 的 设计 和 流程 。 

这 本 书 还 能 帮助 你 打造 一 个 能 节省 时 间 的 构建 过 程 。 时 间 是 保持 效率 的 关键 因素 ， 而 作为 
Web 应 用 开发 者 ， 我 们 希望 能 充分 利用 我 们 的 时 间 。“ 构 建 优 先 ” 原 则 能 帮助 我 们 从 开发 伊始 就 
注重 应 用 的 结构 ， 以 便 开发 出 简洁 、 可 测试 的 应 用 。 学 会 操作 流程 ， 以 及 如 何 管理 复杂 性 ， 是 现 
代 化 JavaScript 应 用 开发 的 基石 。 从 长 远 来 看 ， 如 果 能 处 理 好 这 两 方面 ， 结 果 就 会 很 不 一 样 。 

《JavaScript Web 应 用 开发 》 这 本 书 会 告诉 你 如 何在 前 端 开发 中 使 用 自动 化 技术 ， 涵 盖 你 所 需 
要 知道 的 一 切 ， 比 如 说 如 何 避 免 重 复 的 任务 ， 如 何 使 用 简洁 的 工具 监控 生产 版 本 , 减少 人 为 错误 
造成 的 损失 。 在 这 个 过 程 中 , 自动 化 是 关键 。 如 果 时 至 今日 你 还 没有 在 工作 流程 中 使 用 自动 化 技 
术 , 你 活 得 就 太 辛 苗 了 。 如 果 一 系列 日 常任 务 能 使 用 一 个 命令 完成 的 话 ， 请 听从 Nico 的 建议 , 使 
用 自动 化 技术 ， 把 节省 下 来 的 时 间 用 在 提升 应 用 的 代码 质量 上 。 

模块 化 至 关 重 要 , 能 协助 我 们 构建 可 伸缩 旦 可 维护 的 应 用 。 模块 化 不 仅 能 确保 应 用 的 各 个 部 
分 都 能 轻易 地 加 以 测试 ， 容易 编写 文档 ,而 且 还 能 鼓励 我 们 重用 代码 ， 并 把 精力 集中 在 提高 代码 
质量 上 。 在 这 本 书 中 , Nico 熟 练 地 示范 了 如 何 编写 模块 化 的 JavaScript 组 件 , 如 何 正 确 人 处理 异步 流 ， 
还 介绍 了 足够 你 用 来 构建 应 用 的 客户 端 MVC 知 识 。 

系 好 安全 带 ， 调 整 好 命令 行 ， 享 受 这 段 改进 开发 流程 的 旅程 吧 。 






































































































































Addy Osmani 
谷歌 高 级 工程 师 ， 对 开发 者 使 用 的 工具 充满 激情 
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计生 = 
用 J 百 
像 这 个 领域 中 的 大 多 数 人 一 样 , 我 一 直 着 迷 于 解决 问题 。 虽然 寻 找 解 决 方案 时 痛苦 不 堪 , 但 








找到 后 却 无 比 欢 欣 一 一 有 什么 能 比 得 上 这 样 的 这 程 呢 ! 年 轻 时 我 特别 喜欢 玩 策略 游戏 , 例如 国际 
象棋 ,我 从 孩童 起 就 开始 玩 了 。《 星 际 争霸 》 这 个 实时 策略 游戏 , 我 已 经 玩 了 10 年 。 还 有 万 智 牌 ， 
一 种 集 换 式 卡片 游戏 , 可 理解 为 介 于 扑克 和 国际 象棋 之 间 的 游戏 。 这 些 游戏 为 我 提供 了 很 多 解决 
问题 的 机 会 。 

上 小 学 时 , 我 学 会 了 Pascal 和 基本 的 Flash 编 程 。 我 兴奋 坏 了 ,又 接着 学 习 了 Visual Basic、PHP 
和 C 语 言 , 并 利用 我 对 <marquee> 和 <blink> 标 签 的 充分 掌握 以 及 对 MySQL 的 粗浅 理解 , 开始 开 
发 网 站 。 没 有 什么 能 阻挡 我 ， 而 且 对 解决 问题 的 渴望 没有 就 此 结束 ， 我 又 开始 玩 游戏 了 。 

《网 络 创 世纪 》( 简称 UO ) 是 一 款 大 型 多 人 在 线 角色 扮演 游戏 ( 简称 MMORPG )， 和 其 他 游 
戏 一 样 ， 我 也 沉迷 于 这 个 游戏 很 多 年 。 后 来 ， 我 发 现 了 一 个 UO 服务 器 的 开源 实现 ，MRunUO"， 
完全 使 用 C# 开 发 。 我 所 在 的 RunUO 服 务 器 的 管理 员 没有 编程 经 验 ， 他 们 逐渐 开始 信任 我 ， 让 我 
修正 一 些小 缺陷 , 我 们 通过 邮件 来 来 回回 地 发 送 源 码 。 我 着 迷 了 。C# 是 一 门 美妙 而 富有 表现 力 的 
语言 ， 而 且 用 来 开发 UO 服务 器 的 开源 软件 友好 且 诱 人 ， 其 至 不 需要 使 用 IDE ( 也 不 用 知道 IDE 是 
什么 )， 因 为 服务 器 能 动态 编译 脚本 文件 。 基 本 上 ， 只 需要 在 一 个 文件 中 写 10~15 行 代码 ， 继 承 
Dragon 类 ， 就 能 在 龙头 上 添加 一 个 吓人 的 泡 状 文本 框 ; 或 者 覆盖 一 个 方法 ， 就 能 让 龙 吐 出 更 多 
火球 。 这 门 语言 和 它 的 句法 一 点 都 不 难 学 ， 在 玩 玩乐 乐 中 就 能 学 会 。 

后 来 ， 一 个 朋友 告诉 我 ， 我 可 以 靠 编写 C# 代 码 为 生 。 他 说 :“ 知 道 吗 ， 真 的 有 人 愿意 付费 让 
你 做 这 件 事 。” 随 后 我 又 开始 开发 网 站 了 ， 不 过 这 一 次 我 不 是 为 了 找 乐 子 ， 也 没有 仅仅 使 用 Front 
Page 和 一 堆 <marquee> 标 签 。 可 是 ， 对 我 来 说 ， 仍 像 是 在 玩 游戏 。 

几 年 前 ， 我 读 了 《程序 员 修 炼 之 道 》“ 这 本 书 ， 受 到 一 些 触 动 。 这 本 书 给 出 了 很 多 可 靠 的 建 
议 , 我 强烈 推荐 你 也 读 读 。 书 中 有 个 观点 对 我 影响 比较 深 : 作者 鼓励 我 们 走出 自己 的 安乐 窜 ， 尝 
试 一 些 我 们 计划 去 做 但 还 没有 做 的 事 。 那 时 ， 我 的 安乐 帘 是 C# 和 ASP.NET， 所 以 我 决定 尝试 
Node.js。 对 于 在 服务 器 端 做 JavaScript 开 发 ， 这 是 一 个 真 真切 切 的 类 Unix 平 台 。 就 那 时 我 围绕 微 
软 的 开发 经 验 来 说 ， 这 无 疑 是 个 突破 。 






















































































































































































Q@ RunUO 的 网 站 地 址 是 http://runuo.com， 不 过 这 个 项 目 已 经 停止 维护 了 。 
@ Andrew Hunt 和 David Thomas 合 著 的 这 本 书 是 永恒 的 经 典 之 作 ， 你 一 定 要 认真 读 一 下 。 
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前 言 vii 





我 从 这 次 尝试 中 学 到 了 大 量 知识 ， 还 搭建 了 一 个 博客 "， 记 录 我 在 这 个 过 程 中 学 到 的 各 种 知 
识 。 大 概 半年 之 后 ， 我 决定 把 我 在 C# 设 计 上 多 年 积累 的 经 验 写成 一 本 关于 JavaScript 的 书 。 我 联 
系 了 Manning 出 版 社 ， 他 们 欣然 接受 了 我 的 请 求 ， 并 帮助 我 做 头脑 风暴 ， 把 初步 想法 变 得 明确 从 
容 、 简 单 明 了 。 

我 花 了 很 多 时 间 和 精力 写 这 本 书 ， 表 明了 我 对 Web 的 热爱 。 这 本 书 中 包含 一 些 关 于 应 用 设计 
和 过 程 自 动 化 的 实用 建议 和 最 佳 实践 ， 能 帮助 你 提升 Web 项 目的 质量 。 





























我 的 博客 名 为 “Pony Foo”， 地 址 是 http:/ponyfoo.com。 我 写 的 文章 涉及 Web 、 人 性 能 、 渐 进 增强 和 JavaScript。 
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关于 本 书 


Web 开 发 的 增长 速度 异乎 寻常 ， 现 在 很 难 想象 没有 Web 的 世界 会 是 什么 样子 。Web 以 其 容错 
性 而 著称 。 在 传统 编程 技术 中 ， 缺 少 一 个 分 号 、 忘 记 关 闭 标 签 或 者 声明 无 效 的 属性 都 会 导致 严重 
的 后 果 ， 但 Web 中 却 有 所 不 同 。 在 Web 中 可 以 犯错 ， 但 错误 的 生存 空间 越 来 越 少 。 之 所 以 出 现 这 
种 二 元 现象 ， 是 因为 现代 的 Web 应 用 和 以 前 相 比 ， 要 复杂 一 个 数量 级 。 在 Web 发 展 初期 ， 我 们 可 
能 会 使 用 JavaScript 适 当地 小 幅度 修改 网 页 ， 但 在 现在 的 Web 中 ， 整 个 网 站 都 使 用 JavaScript 驱 动 ， 
在 单个 页 面 中 泻 染 。 

这 是 一 本 指南 书 , 会 告诉 你 如 何在 现代 的 环境 中 使 用 更 好 的 方式 做 Web 开 发 ， 就 像 使 用 其 他 
语言 做 开发 一 样 , 编写 出 可 维护 的 JavaScript 应 用 。 你 将 学 习 如 何 利 用 自动 化 技术 取代 容易 出 错 的 
繁复 过 程 ， 如 何 设计 易于 测试 的 模块 化 应 用 ， 以 及 如 何 测试 应 用 。 

过 程 自动 化 是 整个 开发 过 程 中 节省 时 间 的 关键 所 在 。 在 开发 环境 中 使 用 自动 化 技术 能 帮助 我 
们 把 精力 集中 在 思考 问题 、 编 写 代 码 和 调试 上 。 自动 化 技术 有 助 于 确保 每 次 存 人 版 本 控制 系统 中 
的 代码 能 正常 运行 。 准 备 把 应 用 部 署 到 生产 环境 时 , 使 用 自动 化 技术 能 节省 时 间 ， 自 动 化 技术 能 
打包 、 简 化 资源 文件 、 创 建 子 图 集 表单 ， 还 能 执行 其 他 性 能 优化 措施 。 部 署 时 ， 自 动 化 技术 还 能 
减少 风险 , 自动 完成 复杂 且 容 易 出 错 的 操作 。 很 多 书 讨 论 的 都 是 后 端 语 言 使 用 的 过 程 和 自动 化 技 
术 ， 很 难 找到 针对 JavaScript 应 用 的 资料 。 

本 书 主要 想 表 达 的 观点 是 要 注重 质量 。 使 用 自动 化 技术 能 搭建 一 个 更 好 的 应 用 构建 环境 , 但 
光 有 自动 化 技术 还 不 够 ， 应 用 本 身 也 要 有 质量 意识 。 为 此 ， 本 书 涵盖 了 应 用 设计 的 指导 方针 ， 先 
介绍 语言 相关 的 注意 事项 , 然后 告诉 你 模块 化 的 强大 作用 ,再 帮 你 厘清 异步 代码 , 教 你 开发 客户 
端 MVC 应 用 ， 最 后 为 JavaScript 代 码 编写 单元 测试 。 

本 书 和 其 他 讲解 Web 技 术 的 书 一 样 ， 依赖 于 特定 版 本 的 工具 和 框架 , 不 过 本 书 把 代码 库 相 关 
的 问题 和 所 需 掌 握 的 理论 区 分 开 了 。 这 是 种 妥协 的 做 法 , 因为 Web 开 发 领域 使 用 的 工具 频繁 变化 ， 
但 工具 的 设计 理念 和 操作 过 程 的 变化 节奏 要 慢 得 多 。 我 把 这 两 方面 分 开 了 , 希望 这 本 书 在 未 来 几 
年 仍 有 价值 。 


本 书 结构 


本 书包 含 两 部 分 和 四 篇 附录 。 第 一 部 分 专门 介绍 构建 优先 原则 ,告诉 你 这 个 原则 是 什么 ， 以 
及 如 何 辅 助 你 的 日 常 工作 。 这 一 部 分 详细 说 明 过 程 自动 化 , 涵盖 日 常 开发 和 自动 部 署 , 还 有 持续 
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关于 本 书 这 








集成 和 持续 部 署 包 ， 共 含 4 章 。 














口 第 1 章 说 明 构 建 优先 原则 的 核心 法 则 ， 以 及 可 以 建立 的 不 同 过 程 和 流程 。 然 后 介绍 贯穿 全 

书 的 应 用 设计 指导 方针 ， 这 些 方针 是 后 续 内 容 的 基础 。 

口 第 2 章 介绍 Grunt， 以 及 如 何 使 用 Grunt 制 定 构建 流程 。 然 后 介绍 几 个 可 以 使 用 Grunt 轻 易 完 

成 的 构建 任务 。 

D 第 3 章 专门 介绍 环境 和 部 署 流程 。 你 会 发 现 不 是 所 有 环境 都 是 一 样 的 ， 应 该 学 习 在 开发 环 

境 中 如 何 权衡 调试 便利 性 和 生产 力 。 

口 第 4 章 示 范 发 布 流程 , 还 会 讨论 部 署 相关 的 话题 。 你 会 学 到 几 个 针对 性 能 优化 的 构建 任务 ， 
并 探索 如 何 自动 部 署 。 你 还 会 学 习 把 应 用 部 署 到 生产 环境 后 如 何 连接 持续 集成 服务 ， 以 
及 如 何 监控 应 用 。 

第 一 部 分 主要 介绍 如 何 使 用 Grunt 构 建 应 用 , 附录 C 会 教 你 如 何 选择 最 符合 任务 需求 的 构建 工 





















































具 。 读 完 第 一 部 分 后 ,该 读本 书 第 二 部 分 了 。 第 二 部 分 专门 介绍 如 何 管理 应 用 设计 过 程 中 的 复杂 
度 。 模块 、MVC、 异 步 代码 流 、 测 试 和 设计 良好 的 API 在 现代 的 应 用 中 都 扮演 着 重要 角色 ， 这 些 
话题 在 下 面 儿童 中 讨论 。 














口 第 $ 章 主要 介绍 如 何 开发 模块 化 的 JavaScript 应 用 。 这 一 章 首先 说 明 模 块 的 构成 , 以 及 如 何 
设计 模块 化 的 应 用 ， 还 会 列 出 这 么 做 的 好 处 。 随 后 ， 简 要 说 明 JavaScript 语 言 的 词法 作用 
域 和 怪异 的 地 方 。 然 后 ， 概 览 实现 模块 化 的 主要 方式 : RequireJS 、CommonJS 和 即将 到 来 
的 ES6 模 块 系统 。 最 后 ， 介 绍 几 个 包 管 理 方案 ， 例 如 Bower 和 npme。 

口 第 6 章 介绍 异步 代码 流 。 如 果 你 兽 陷 人 到 回调 之 坑 中 ， 这 一 章 可 能 会 为 你 提供 摆脱 这 一 困 
境 的 方法 。 这 一 章 讨论 了 处 理 异 步 代 码 流 中 复杂 度 的 多 种 方式 ， 分 别 为 回调 、Promise 对 
象 、 事 件 和 ES6 的 生成 器 。 你 还 会 学 到 如 何在 这 些 范式 中 正确 处 理 错误 。 

口 第 7 章 首先 介绍 MVC 架 构 ， 然 后 将 其 应 用 到 Web 中 。 你 会 学 习 如 何 借助 MVC 分 离 关 注 点 ， 
使 用 Backbone 开 发 富 客户 端 应 用 。 随后 , 你 会 学 习 Rendr, 使 用 它 在 服务 器 端 泻 染 Backbone 
视图 ， 优 化 应 用 的 性 能 和 可 访问 性 。 

口 现在 你 的 应 用 已 经 模块 化 ， 外 观 精 美 ， 而 且 易 于 维护 ， 接 下 来 在 第 8 章 自然 就 该 使 用 不 同 
的 方式 测试 应 用 了 。 为 此 ， 我 会 介绍 各 种 JavaScript 测 斌 工具， 并 传授 使 用 这 些 工具 测试 

型 组 件 的 实践 经 验 。 然后, 我们 要 为 第 7 章 使 用 MVC 架 构 开发 的 应 用 编写 测试 。 我们 不 
仅 要 做 单元 测试 ， 还 会 学 习 持 续集 成 、 外 观测 试 和 性 能 评估 。 

口 第 9 章 是 本 书 最 后 一 章 ， 专 门 介绍 REST API 设 计 。API 供 客户 端 与 服务 器 交互 ， 而 且 为 我 
们 在 应 用 中 所 做 的 一 切 黄 定 基础 。 如 果 API 复 杂 得 令 人 费解 ,那么 整个 应 用 有 可 能 也 是 如 

此 。REST 为 API 的 设计 给 出 了 明确 的 指导 方针 ， 能 确保 API 简 单 明 了 。 最 后 ， 我 们 会 介绍 

如 何 使 用 传统 方式 在 客户 端 使 用 API。 

你 可 以 在 读 完 正文 后 再 阅读 附录 , 不 过 , 在 你 遇 到 问题 时 就 及 时 阅读 更 能 发 挥 附录 的 作用 ， 
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为 附录 可 能 会 为 你 的 疑问 提供 解答 。 在 正文 中 ， 如 果 某 处 需要 使 用 附录 的 内 容 补 充 ， 我 会 指出 来 。 


口 附录 A 简要 介绍 Node.js 和 其 使 用 的 模块 系统 CommonJS。 这 个 附录 能 帮 你 解决 安装 Node.js 
的 问题 ， 还 会 解答 一 些 关 于 CommonJS 工 作 方式 的 疑问 。 
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X 关于 本 书 





口 附录 B 详 细 介 绍 Grunt。 第 一 部 分 中 的 儿童 只 说 明了 使 用 Grunt 必 备 的 知识 ， 而 这 个 附录 则 
详细 说 明了 Grunt 的 内 部 工作 机 制 。 如 果 你 真 想 使 用 Grunt 开 发 一 个 成 熟 的 构建 过 程 ， 这 个 
附录 能 为 你 提供 一 些 帮助 。 

口 附录 C 明 确 表明 了 本 书 和 Grunt 没 有 任何 “ 联 娴 "， 给 出 了 两 个 替代 工具 一 Gulp 和 npnm 

run。 这 个 附录 分 析 了 这 三 个 工具 各 自 的 优 缺 点 ， 让 你 自己 决定 哪个 最 符合 你 的 需求 。 

口 附录 D 是 一 个 JavaScript 代 码 质量 指南 , 列 出 了 大 量 最 佳 实践 , 你 可 以 选择 该 遵守 哪些 。 我 
的 目的 不 是 强制 你 遵守 这 些 指导 方针 ， 而 是 要 让 你 明白 ， 在 开发 团队 中 保持 代码 基 的 一 
致 性 是 件 好 事 。 


代码 约定 和 下 载 


所 有 源码 都 使 用 等 宽 字 体 表示 ， 例 如 fixed-size width font， 而 且 有 时 源码 会 放 在 一 个 
有 名 称 的 代码 清单 中 。 很 多 代码 清单 中 都 有 注解 ， 用 于 体现 重要 的 概念 。 本 书 的 配套 源码 是 开源 
的 ， 公 开 托 管 在 GitHub 中 ， 如 果 想 下 载 ， 请 访问 github.com/buildfirst/buildfirst。 这 个 在 线 仓 库 中 
的 源码 始终 都 是 最 新 版 。 虽然 书 中 给 出 的 代码 有 限 , 但 在 仓库 中 都 有 很 好 的 注释 , 如 果 遇 到 问题 ， 
我 建议 你 看 一 下 带 注 释 的 代码 。 

代码 还 可 以 从 出 版 社 的 网 站 中 下 载 ， 地 址 是 www.manning.com/JavaScriptApplicationDesign。 


作者 在 线 


购买 本 书 英 文 版 的 读者 可 以 免费 访问 由 Manning 出 版 社 维护 的 在 线 论 坛 ， 在 这 个 论坛 中 你 可 
以 对 本 书 发 表 评论 、 询 问 技术 问题 、 从 作者 和 其 他 用 户 那里 得 到 帮助 。 要 访问 并 订阅 该 论坛 ,请 
访问 www.manning.com/JavaScriptApplicationDesign。 这 个 页 面 介 绍 了 注册 后 如 何 访问 论坛 、 可 以 
得 到 什么 帮助 以 及 在 论坛 中 的 行为 准则 。 

Manning 致 力 于 为 读者 提供 一 个 场所 ， 让 读者 之 间 、 读 者 和 作者 之 间 能 进行 有 意义 的 对 话 。 
但 我 们 并 不 强制 作者 参与 , 他 们 在 论坛 上 的 贡献 是 自愿 而 且 不 收费 的 。 我 们 建议 你 尽量 问 作者 一 
些 有 挑战 性 的 问题 ， 免 得 他 失去 参与 的 兴趣 ! 

只 要 本 书 英文 版 仍然 在 售 , 读者 就 能 从 出 版 社 的 网 站 上 访问 作者 在 线 论 坛 和 之 前 讨论 话题 的 
存档 。 
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天 于 封面 


本 书 封面 中 的 画像 题 为 “1760 年 堪 察 加 的 冬季 习俗 ”。 堪 察 加 半岛 位 于 俄罗斯 最 东边 ， 东 临 
太平 洋 , 西 接 哪 霍 次 克海 。 这 幅 画像 出 自 1757 年 至 1772 年 在 伦敦 出 版 的 《古代 和 现代 不 同 国家 的 
服饰 图 集 》 作者 为 托马斯 ， 杰 弗 里 斯 。 这 本 图 集 的 诽 页 指出 ， 这 些 图 像 都 是 手工 上 色 的 铜板 大 
刻 ， 并 使 用 阿拉 伯 树 胶 提 色 。 托 马 斯 . 杰 弗 里 斯 ( 1719 一 1771 年 ) 被 称 为 “地 理学 界 的 乔治 三 世 
国王 ”。 他 是 一 名 英国 制图 师 ， 在 他 那个 年 代 是 主要 的 地 图 供应 商 。 他 为 政府 和 官方 机 构 雕 刻 并 
印刷 地 图 , 还 生产 了 各 种 各 样 的 商业 地 图 和 地 图 册 , 尤其 是 北美 洲 的 地 图 。 作 为 一 名 制图 师 , 他 
对 在 所 测绘 地 方 生活 的 本 地 居民 的 服饰 产生 了 兴趣 , 他 在 这 本 四 卷 图 集中 出 色 地 把 这 些 服饰 展示 
了 出 来 。 

迷恋 和 遥远 的 国度 ,为 了 消遣 而 旅行 ,这 在 18 世 纪 是 相对 较 新 的 现象 , 因此 这 本 图 集 十 分 受 欢 
迎 , 它 向 游客 和 恒 慑 旅行 的 人 介绍 了 其 他 国家 的 居民 。 杰 弗 里 斯 这 几 卷 图 集中 的 绘画 充满 多 样 性 ， 
在 几 个 世纪 以 前 就 生动 表现 出 了 世界 各 国人 民 的 独特 个 性 。 现在， 人们 的 着 装 规范 已 经 改变 ,地 
区 和 国家 之 间 的 多 样 性 曾经 是 多 么 丰富 , 如 今 则 在 慢 慢 消逝 。 现 在 甚至 很 难 区 分 不 同 大 陆 的 居民 。 
或 许 ， 从 乐观 的 一 面 来 看 ,虽然 我 们 丢失 了 文化 和 视觉 的 多 样 性 ,但 换 来 了 更 多 样 化 的 个 人 生 
活 一 一 或 者 说 是 更 多 样 化 且 更 充满 智能 和 技术 的 乐趣 生活 。 

今 时 今日 ， 计 算 机 图 书 层出不穷 ，Manning 就 以 两 个 半 世 纪 以 前 杰 弗 里 斯 这 套 书 中 多 样 性 的 
民族 服饰 ， 来 表达 对 计算 机 行业 日 新 月 异 的 发 明 与 创造 的 赞美 。 
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致谢 








如 果 在 写作 过 程 中 没有 大 家 的 支持 和 忍耐 ,你 的 手中 就 不 可 能 捧 着 这 本 书 了 。 我 只 希望 最 值 
得 感谢 的 人 ,也 就 是 我 的 朋友 和 家 人 已 经 知道 , 我 对 你 们 的 爱 、 理 解 和 不 断 的 安奈 充满 感激 ， 这 
份 感激 之 情 无 法 用 言语 表明 。 

还 有 很 多 人 直接 或 间接 地 为 本 书 贡 献 了 大 量 知识 和 想法 。 

JavaScript 开 源 社区 的 成 员 见 识 不 凡 , 相互 鼓励 , 始终 在 作 无 私 的 贡献 。 他 们 让 我 见识 到 了 更 
好 的 软件 开发 方式 ,这 种 方式 不 仅 使 协作 成 为 可 能 ,而且 还 积极 鼓励 协作 。 这 些 人 中 的 大 多 数 都 
通过 传播 Web 知 识 、 维 护 博客 、 分 享 经验 和 资源 或 教 我 知识 ， 间 接 为 社区 作 了 贡献 。 有 些 人 则 开 
发 了 本 书 讨论 的 工具 ， 直 接 作 出 贡献 ， 这些 人 包括 Addy Osmani、Chris Coyier 、Guillermo Rauch.、 
Harry Roberts、Ilya Grigorik 、James Halliday、John-David Dalton、Mathias Bynens、Max Ogden 、 
Mikeal Rogers 、Paul Irish 、Sindre Sorhus 和 T.J. Holowaychuk。 

还 有 一 些 书籍 和 文章 的 作者 影响 了 我 , 让 我 变 成 了 更 合适 的 教育 工作 者 。 这些 人 撰写 的 文章 
和 分 享 的 知识 对 我 帮助 巨大 ， 使 我 确定 了 自己 的 职业 发 展 方向 。 他 们 是 Adam Wiggins 、Alan 


Cooper、Andrew Hunt、 Axel Rauschmayer、 Brad Frost、 Christian Heilmann、 David Thomas、 Donald 


























Norman、 Frederic Cambus、 Frederick Brooks、 Jeff Atwood、 Jeremy Keith、 Jon Bentley、 Nicholas 
C. Zakas 、Peter Cooper、 Richard Feynmann 、Steve Krug、Steve McConnell 和 Vitaly Friedman。 

特别 感谢 Manning 出 版 社 的 开发 编辑 Susan Conant。 她 让 我 充分 发 挥 了 最 佳 水 平 写 作 这 本 书 ， 
如 果 没 有 她 ， 这 本 书 会 逊色 很 多 。 这 是 我 的 第 一 本 书 ， 是 她 一 直 领 着 我 走 完整 个 细致 人 微 的 写作 
过 程 。 她 以 严格 而 温和 的 指导 , 帮 有 我 把 众多 想法 写成 了 这 本 不 会 羞 于 出 版 的 书 。 得 益 于 她 的 帮助 ， 
我 的 写作 水 平 大 有 长 进 ， 我 特别 感谢 她 。 

在 这 方面 帮助 我 的 人 不 止 她 一 个 。Manning 出 版 社 的 所 有 人 都 希望 这 本 书 能 做 到 最 好 。 出 版 
人 Marjan Bace， 连 同 所 有 编辑 ， 都 应 得 到 感谢 。Valentin Crettaz 和 Deepak Vohra 两 位 技术 校对 不 
仅 帮 我 确保 了 代码 示例 是 一 致 且 有 用 的 ， 还 给 我 提供 了 很 好 的 反馈 。 

还 有 一 大 帮 不 知道 姓名 的 人 愿意 通读 书稿 ， 说 出 他 们 的 想法 ， 帮 助 改 进 这 本 书 。 感 谢 MEAP 
的 读者 们 ,感谢 你 们 在 “作者 在 线 ” 论 坛 中 发 布 勘误 和 评论 。 还 要 感谢 在 本 书 出 版 的 各 个 阶段 阅 
读本 书 的 各 位 审 稿 人 员 : Alberto Chiesa、 Carl Mosca、 Dominic Pettifer、Gavin Whyte Hans Donner、 
llias Ioannou、 Jonas Bandi、Joseph White 、Keith Webster、 Matthew Merkes 、Richard Harriman 、 
Sandeep Kumar Patel 、Stephen Wakely 、Torsten Dinkheller 和 Trevor Saunders。 

特别 感谢 为 本 书 作 序 的 Addy Osmani， 以 及 其 他 每 个 参与 本 书 出 版 的 人 。 有 些 人 可 能 没有 直 
接 按 键 输入 内 容 ， 但 他 们 在 本 书 出 版 的 过 程 中 也 扮演 了 重要 角色 ， 加 快 了 这 本 书 的 面世 进程 。 
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构建 过 程 


本 书 第 一 部 分 专门 介绍 构建 过 程 ， 还 会 通过 实例 介绍 Grunt。 这 一 部 分 既 有 理论 也 有 实 
践 ， 目 的 是 告诉 你 什么 是 构建 过 程 ， 为 什么 以 及 如 何 使 用 构建 过 程 。 

第 1 章 说 明 构 建 优先 原则 包含 的 两 层 意思 : 构建 过 程 和 应 用 复杂 度 管理 。 然 后 开始 编写 第 
一 个 构建 任务 : 使 用 lint 程 序 检查 代码 ， 避 免 有 句法 错误 。 

第 2 章 专 门 介绍 构建 任务 。 你 会 了 解 组 成 一 次 构建 的 各 项 任务 ， 如 何 配置 任务 ， 以 及 如 何 
自己 编写 任务 。 针 对 每 种 情况 ， 我 们 都 会 先 讲 理论 ， 然 后 再 使 用 Grunt 编 写实 例 。 

第 3 章 介 绍 如 何 配置 应 用 的 环境 ， 而 且 要 安全 存储 敏感 信息 。 我 们 会 说 明 搭 建 开 发 环境 的 
流程 ， 以 及 如 何 自 动 完成 这 些 构建 步骤 。 

第 4 章 再 介绍 一 些 需 要 在 发 布 应 用 时 执行 的 任务 ， 例 如 优化 静态 资源 和 管理 文档 。 你 会 学 到 
如 何 使 用 持续 集成 服务 检查 代码 的 质量 。 我 们 还 会 把 应 用 部 署 到 线 上 环境 ， 让 你 实际 体验 一 把 。 
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本 章 内 容 

口 现代 应 用 设计 面临 的 问题 
口 什么 是 构建 优先 原则 

口 构建 过 程 

口 管理 应 用 中 的 复杂 度 


























使 用 正确 的 方式 开发 应 用 可 能 很 难 ， 我 们 要 合理 规划 。 我 曾 只 用 一 个 周末 就 开发 出 了 应 用 ， 
但 应 用 设计 得 可 能 并 不 好 。 创 建 随时 会 扔 掉 的 原型 可 以 即兴 发 挥 , 但 是 开发 一 个 可 维护 的 应 用 则 
需要 规划 , 要 知道 怎么 把 脑海 中 设想 的 功能 组 织 在 一 起 , 甚至 还 要 考虑 到 不 久之 后 可 能 会 添加 的 
功能 。 我 曾 付 出 无 数 努 力 ， 但 应 用 的 前 端 还 是 差强人意 。 

后 来 我 发 现 ， 后 端 服务 通常 都 有 专门 的 架构 ,专门 用 于 规划 、 设 计 和 概览 这 些 服务 ， 而 且 往 
往 还 不 止 一 个 架构 ， 而 是 一 整套 。 可 是 前 端 开 发 的 情况 却 完全 不 同 , 前 端 开 发 者 会 先 开 发 出 一 个 
可 以 运行 的 应 用 原型 ， 然 后 运行 这 个 原型 ， 和 希望 在 生产 环境 中 依然 正常 。 前 端 开发 同样 需要 规划 
架构 ， 像 后 端 开发 一 样 去 设计 应 用 。 

以 前 ,我 们 会 从 网 上 复制 一 些 代码 片段 ， 然 后 粘贴 到 页 面 中 ， 就 这 样 收工 了 。 可 是 这 样 的 日 
子 早已 过 去 , 先 把 JavaScript 代 码 搅和 在 一 起 , 事后 再 做 修改 , 不 符合 现代 标准 了 。 如今, JavaScript 
是 开发 的 焦点 ， 有 很 多 框架 和 库 可 以 选择 ,这些 框架 和 库 能 帮助 我 们 组 织 代码 ,我 们 不 会 再 编写 
一 整个 庞大 的 应 用 了 , 更 多 的 是 编写 小 型 组 件 。 可 维护 性 不 是 随意 就 能 实现 的 ,我 们 从 开发 应 用 
伊始 就 要 考虑 可 维护 性 ， 并 在 这 个 原则 的 指导 下 设计 应 用 。 设计 应 用 时 如 果 不 考虑 可 维护 性 ， 随 
着 功能 的 不 断 增加 ， 应 用 就 会 像 受 受 乐 搭 出 的 积木 塔 一 样 慢 慢 倾斜 。 

如 果 不 考虑 可 维护 性 , 最 后 根本 无 法 再 往 这 个 塔 上 放任 何 积木 。 应 用 的 代码 会 变 得 错综复杂 ， 
缺陷 越 来 越 难 追查 。 重 构 就 要 中 断 产品 开发 ， 业务 可 经 不 起 这 样 折 腾 。 而 且 还 要 保持 原 有 的 发 布 
周期 ， 根 本 不 能 让 积木 塔 倒 下 ， 所 以 我 们 只 能 妥协 。 


1.1 问题 出 现 了 
你 可 能 想 把 一 个 新 功能 部 署 到 生产 环境 ， 而 且 想 自己 动手 部 署 。 你 要 用 多 少 步 完成 这 次 部 
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1.1 问题 出 现 了 3 





署 ? 八 步 还 是 五 步 ? 为 什么 你 要 在 部 署 这 样 的 日 常 工作 中 冒险 呢 ? 部 署 应 该 和 在 本 地 开发 应 用 
一 样 ， 只 需 一 步 就 行 。 

可 惜 事实 并 非 如 此 。 我 以 前 会 手动 执行 部 署 过 程 中 的 很 多 步骤 ， 你 是 不 是 也 是 这 样 ? 当然 ， 
你 一 步 就 能 编译 好 应 用 ,或 者 可 能 会 使 用 服务 器 端 解释 型 语言 ,根本 不 用 事先 编译 。 如 果 以 后 需 
要 把 数据 库 更 新 到 最 新 版 本 , 你 甚至 可 能 会 编写 一 个 脚本 执行 升级 操作 , 但 还 是 要 登 人 数据 库 服 
务 器 ， 上 传 这 个 脚本 文件 ， 然 后 自己 动手 更 新 数据 库 模式 。 

做 得 不 错 ， 数 据 库 已 经 更 新 了 ， 可 是 有 地 方 出 错 了 ,应 用 抛 出 了 错误 。 你 看 了 下 时 间 ， 应 用 
已 经 下 线 超过 10 分 钟 了 。 这 只 是 一 次 简单 的 升级 啊 , 怎么 会 出 错 呢 ?你 查看 日 志 , 发 现 原来 是 忘 
记 把 新 变量 添加 到 配置 文件 里 了 , 真是 太 俊 了。 你 立即 加 上 了 新 变量 , 抱怨 着 这 次 与 代码 基 的 斗 
争 。 你 忘记 在 部 署 前 修改 配置 文件 ,在 部 署 到 生产 环境 前 忘 了 更 新 配置 。 这 种 情况 是 不 是 听 起 来 
很 熟悉 ? 不 要 害怕 ， 这 种 情况 很 常见 ， 在 很 多 应 用 中 都 存在 。 我 们 来 看 看 下 面 这 个 危险 的 案例 。 


1.1.1 45 分 钟 内 每 秒 损失 17 万 美元 


我 敢 肯 定 , 一 个 严重 问题 导致 损失 几乎 五 亿美 元 的 案例 会 让 你 打 起 精神 。 在 骑士 资本 公司 就 
发 生 过 这 样 的 事 。 "他们 开发 了 一 个 新 功能 , 让 股票 交易 员 参 与 一 个 叫 “零售 流动 性 计划 ”( Retail 
Liquidity Program， 简 称 RLP ) 的 项 目 中 。RLP 的 目的 是 取代 已 经 停 用 九 年 的 “权力 限定 ”( Power 
Peg， 简 称 PP ) 功能 。RLP 的 代码 中 重用 了 一 个 用 来 激活 PP 功能 的 标志 ， 添 加 RLP 时 ， 他 们 把 PP 
移 除 了 ,所 以 一 切 都 正常 运行 着 ， 至 少 他 们 认为 是 正常 的 。 但 是 ， 当 他 们 打开 这 个 标志 时 ， 问 题 
出 现 了 。 

他 们 在 部 署 时 没有 采用 正式 的 过 程 , 而 且 只 由 一 个 技术 人 员 手 动 执行 。 这 个 人 忘记 把 代码 改 
动 部 署 到 八 个 服务 器 中 的 某 一 个 ， 因 此 ， 在 这 个 服务 器 中 ， 这 个 标志 控制 的 是 PP 功能 ， 而 不 是 
RLP 功 能 。 直 到 一 星期 后 他 们 打开 这 个 标志 时 才 发 现 问题 : 他 们 在 七 个 服务 器 中 激活 了 RLP， 却 
在 最 后 一 个 服务 器 上 激活 了 停 用 九 年 的 PP 功能 。 

这 台 服 务 器 上 处 理 的 订单 触发 执行 的 是 PP 代码 ， 而 不 是 RLP。 这 样 一 来 ,发 送 到 交易 中 心 的 
订单 类 型 是 错误 的 。 他 们 试图 补救 ， 但 情况 进一步 恶化 了 ， 因 为 他 们 从 已 经 部 署 了 RLP 的 服务 器 
中 把 RLP 删 除了 。 长 话 短 说 ， 他 们 在 不 到 一 小 时 的 时 间 内 损失 了 差不多 4 亿 6 千 万 美元 。 他 们 只 要 
使 用 更 正式 的 构建 过 程 ， 就 能 避免 公司 的 衰败 。 想 到 这 一 点 ,就 会 发 现 这 整 件 事 都 是 那么 不 可 思 
议 , 不 负责 任 ， 其 实 又 应 该 是 很 容易 避免 的 。 当 然 ， 这 是 个 极端 案例 ， 但 明确 表明 了 我 的 观点 : 
自动 化 的 过 程 能 尽量 避免 人 为 错误 ， 至 少 也 能 更 早 发 现 问题 。 


1.1.2 ”构建 优先 


我 写 这 本 书 的 目的 是 教 你 使 用 构建 优先 原则 , 在 还 未 编写 任何 代码 之 前 就 做 好 设计 , 让 应 用 
的 结构 清晰 , 易于 测试 。 你 会 学 习 过 程 自动 化 的 知识 , 减少 人 为 出 错 的 可 能 性 ,避免 重 蹈 骑士 资 
本 的 覆 禾 。 构 建 优 先 原则 是 设计 结构 清晰 、 易 于 测试 的 应 用 之 基础 ,使 用 这 一 原则 开发 出 来 的 应 






























































































































































































































































db 关于 骑士 资本 公司 这 次 事件 的 详情 ， 请 访问 http:/bevacqua.io/bfknight。 
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用 易于 维护 ， 也 易于 重 构 。 构 建 优先 原则 的 两 个 基本 要 素 是 过 程 自动 化 和 合理 的 设计 。 

为 了 教 你 使 用 构建 优先 原则 ， 本 书 会 向 你 展示 能 改进 软件 质量 和 Web 开 发 流程 的 技术 。 在 第 
一 部 分 ， 首 先 要 学 习 如 何 建立 适用 于 现代 Web 应 用 开发 的 构建 过 程 ， 然 后 示范 能 提高 日 常 开发 效 
率 的 最 佳 实践 , 例如 修改 代码 后 执行 的 任务 、 在 终端 里 只 输入 一 个 命令 就 部 署 应 用 的 方式 ,以 及 
如 何 监控 生产 环境 中 的 应 用 状态 。 

本 书 第 二 部 分 讲 管理 复杂 度 和 设计 ,专注 于 应 用 的 质量 。 在 这 一 部 分 , 我 会 比较 当前 可 用 的 
一 些 模块 化 方案 ， 介 绍 如何 更 好 地 编写 模块 化 的 JavaScript 组 件 。JavaScript 中 的 异步 流 越 来 越 复 
杂 ， 越 来 越 长 ， 因 此 我 单独 准备 了 一 章 ， 让 你 深入 了 解 如 何 编写 简洁 的 异步 代码 ， 此 外 还 会 学 习 
用 来 提升 异步 代码 质量 的 不 同 工 具 。Backbone 是 入 门 首 选 的 客户 端 MVC 框 架 ， 我 会 介绍 一 些 足 
够 你 开始 使 用 JavaScript 开 发 MVC 应 用 所 需 的 知识 。 前面 我 提 到 过 , 易于 测试 对 应 用 来 说 很 重要 ， 
虽然 我 们 已 经 实现 了 模块 化 ， 向 正确 的 方向 迈 出 了 一 大 步 ， 但 还 是 要 在 单独 的 一 章 中 说 明 测试 。 
最 后 一 章 训 析 一 个 流行 的 API 设 计 思 想 ， 即 REST ( Representational State Transfer 的 缩写 ， 即 “ 表 
现 层 状态 转换 ”)， 我 会 帮助 你 设计 自己 的 API， 还 会 深入 说 明 服 务 需 端的 应 用 架构 ， 不 过 仍然 会 
密切 关注 前 端 。 在 探索 构建 过 程 之 前 ,我 们 再 来 看 一 个 危险 的 案例 。 这 个 案例 遇 到 的 问题 ， 只 要 
遵循 构建 优先 原则 ， 通 过 实现 过 程 自动 化 就 能 避免 。 


1.1.3 ”繁琐 的 前 戏 


如 果 新 成 员 加 入 团队 后 的 设置 步骤 太 复 杂 , 也 表明 自动 化 程度 不 高 。 我 以 前 参与 的 一 些 项 目 ， 
首次 搭建 开发 环境 要 一 周 时 间 , 真是 痛苦 。 在 你 想 弄 明白 代码 的 作用 之 前 , 竟然 要 浪费 一 周 时 间 。 

我 要 下 载 大 约 60 GB 的 数据 库 备份 , 还 要 创建 一 个 数据 库 , 配置 一 些 以 前 从 未 听 说 过 的 选项 ， 
例如 排序 规则 ， 然 后 还 得 运行 一 系列 脚本 ， 升 级 模式 ， 可 这 些 脚本 甚至 不 能 完全 正常 运行 。 解 决 
这 个 问题 之 后 ， 还 要 在 自己 的 环境 中 安装 指定 的 过 时 已 久 的 Windows 媒 体 播放 器 的 解码 器 ， 那 感 
觉 就 像 把 一 头 猪 塞 进 放 满 东西 的 冰箱 一 样 ， 纯 属 徒劳 。 

最 后 ， 我 冲 了 一 杯 咖 啡 ， 试 图 一 次 编译 好 130 多 个 大 型 项 目 。 可 是 ， 忘 了 安装 外 部 依赖 ， 我 
想 ， 安 装 依赖 就 行 了 吧 ， 但 不 行 ， 还 要 编译 C++ 程序 ， 这 样 解码 器 才能 重新 运行 。 我 再 次 编译 ， 
又 过 了 20 分 钟 。 还 不 行 ! 真 烦 。 或许 我 可 以 问 问 身边 的 人 ,可 是 没 人 确切 知道 该 怎么 做 。 他 们 一 
开始 都 经 历 过 这 样 痛苦 的 过 程 ,但 都 不 记得 具体 应 该 怎么 做 了 。 查 查 维基 百科 ? 当然 可 以 , 但 信 
息 记 得 零 零 散 散 ， 并 不 能 用 来 解决 遇 到 的 具体 问题 。 

公司 从 未 制定 正式 的 初始 化 流程 ,事情 变 得 越 来 越 复杂 ,也 就 很 难 再 去 制定 一 个 流程 。 他 们 
不 得 不 处 理 巨 量 的 备份 、 升 级 脚本 、 解 码 咒 和 网 站 所 需 的 多 个 服务 ,哪怕 是 改动 一 个 分 号 也 要 论 

小 时 编译 项 目 。 如 果 他 们 从 一 开始 就 自动 执行 这 些 步骤 ,遵循 构建 优先 原则 ， 这 个 过 程 会 顺利 
得 多 。 
骑士 资本 的 溃败 和 这 个 过 度 复 杂 的 设置 故事 有 一 个 共同 点 : 如 果 他 们 能 提前 做 好 计划 , 自动 
执行 构建 和 部 署 ,就 能 避免 问题 。 提 前 计划 ， 自 动 执行 应 用 相关 的 操作 ,这 是 构建 优先 原则 的 两 
个 基本 要 素 ， 下 一 节 会 详细 说 明 。 
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1.2 ”遵守 构建 优先 原则 ， 提 前 计划 


在 骑士 资本 的 案例 中 , 他 们 忘 了 把 代码 部 署 到 其 中 一 个 服务 器 , 即使 有 一 步 部 署 方 案 能 自动 
把 代码 部 署 到 所 有 服务 器 ， 也 无 法 避免 这 个 公司 破产 。 这 个 案例 深层 次 的 问题 是 代码 质量 ,因为 
他 们 的 代码 基 中 存在 已 经 差不多 十 年 不 用 的 代码 。 

不 增加 功能 的 彻底 重 构 对 产品 经 理 没 有 吸引 力 ， 他 们 的 目标 是 提升 面向 客户 的 可 视 化 产品 ， 
而 不 是 底层 的 软件 。 不 过 ,你 可 以 逐渐 改进 代码 基 , 重 构 你 接触 到 的 代码 ， 为 重 构 后 的 功能 编写 
测试 ， 把 过 时 的 代码 包装 到 接口 中 ， 以 后 再 重 构 一 一 这 样 做 能 不 断 提升 项 目 中 代码 的 平均 质量 。 

不 过 , 单单 重 构 还 不 够 。 好 的 设计 在 一 开始 就 要 带 入 项 目 中 , 不 能 等 出 现 问 题 后 才 试 图 强行 
用 于 糟糕 的 结构 中 。 除 了 前 面 提 到 的 构建 过 程 之 外 ， 本 书 要 阐述 的 男 一 个 基本 要 素 就 是 设计 。 

在 我 们 深入 构建 优先 这 个 未 知 领域 之 前 ， 我 要 强调 一 点 ， 构 建 优先 并 不 只 适用 于 JavaScript。 
多 数 人 通常 在 后 端 语言 〈 例 如 Java、C# 或 PHP ) 中 使 用 我 要 介绍 的 原则 ， 但 在 这 里 我 把 这 些 原则 
应 用 到 了 JavaScript 应 用 的 开发 过 程 中 。 正如 我 前 面 提 到 的 , 客户 端 代码 往往 没有 得 到 应 有 的 关注 
和 尊重 ,常常 没有 适当 地 测试 代码 ， 导 致 代码 有 缺陷 , 或 者 致使 代码 基 难 以 阅读 和 维护 ,最终 受 
影响 的 是 产品 ( 以 及 开发 者 的 工作 效率 )。 

对 JavaScript 来 说 , 因为 这 门 语言 不 需要 编译 器 , 天 真 的 开发 者 或 许 就 以 为 根本 不 需要 一 套 构 
建 过 程 。 这 样 的 想法 就 像 在 黑暗 中 射击 一 样 : 在 浏览 器 中 执行 代码 之 前 ,开发 者 不 知道 代码 是 否 
能 运行 ,也 不 知道 代码 是 否 能 像 预期 那样 做 该 做 的 事 。 然 后 ， 这些 人 可 能 还 要 手动 把 应 用 部 署 到 
线 上 环境 ， 再 远程 登录 服务 器 ， 调 整 一 些 配 置 选 项 ， 让 应 用 能 运行 。 


构建 优先 原则 的 核心 法 则 


构建 优先 原则 的 核心 法 则 不 仅 鼓 励 建 立 一 套 构 建 过 程 , 还 鼓励 使 用 简洁 的 方式 设计 应 用 。 下 
面 概述 了 使 用 构建 优先 原则 能 获得 的 好 处 : 

口 减少 出 错 的 可 能 性 ， 因 为 交互 过 程 中 没有 人 类 参与 ; 

口 自动 执行 重复 性 的 任务 ， 能 提高 工作 效率 ; 

口 模块 化 、 可 伸缩 的 应 用 设计 ; 

口 能 降低 复杂 度 ， 让 应 用 易于 测试 和 维护 ; 

口 让 发 布 版 本 符合 性 能 方面 的 最 佳 实践 ; 

口 部 署 的 代码 在 发 布 前 都 经 过 了 测试 。 

在 图 1-1 中 ， 从 上 到 下 分 为 四 个 部 分 。 

口 构建 过 程 : 使 用 自动 化 方式 编译 和 测试 应 用 。 构 建 的 目的 是 便于 持续 开发 ， 还 能 调 校 应 
用 ， 让 发 布 版 本 得 到 最 好 的 性 能 。 

口 设计 : 你 的 大 部 分 时 间 都 要 用 到 设计 上 ， 在 开发 的 过 程 中 实现 并 改进 架构 。 在 设计 的 过 
程 中 ， 你 可 能 要 重 构 代 码 ， 更 新 测试 ， 确 保 组 件 能 按照 预期 的 方式 运行 。 制 定好 构建 过 
程 或 准备 好 部 署 时 ， 就 要 设计 应 用 的 架构 ， 并 在 代码 基 中 迭代 开发 。 
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口 部 署 和 环境 : 这 两 部 分 的 目的 是 自动 执行 发 布 过 程 和 配置 不 同 的 主机 环境 。 部 署 过 程 的 
作用 是 把 代码 变动 传送 到 主机 环境 中 ， 而 环境 配置 的 作用 是 定义 与 应 用 交互 的 环境 和 服 
务 ， 也 包括 数据 库 。 
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图 1-1 概览 构建 优先 原则 关注 的 四 个 方面 : 构建 过 程 ， 设 计 ， 部 署 和 环境 


从 图 1-1 可 以 看 出 ,使 用 构建 优先 原则 开发 应 用 主要 涉及 两 方面 : 项 目 相关 的 过 程 ， 例 如 构 
建 和 部 署 应 用 ; 应 用 代码 本 身 的 设计 和 质量 , 这 方面 在 日 常 开发 新 功能 时 要 不 断 提升 。 这 两 方面 
同等 重要 ， 而 且 二 者 之 间 相互 依赖 ,这样 才 能 得 到 最 好 的 结果 。 如 果 应 用 设计 得 不 好 ,过 程 再 好 
也 不 管用 。 类 似 地 ， 没 有 合适 的 构建 和 部 署 步 又 ， 再 好 的 设计 也 不 能 挽救 前 面 所 述 的 那 种 危机 。 

和 构建 优先 原则 一 样 ， 本 书 也 分 为 两 部 分 。 第 一 部 分 介绍 构建 过 程 (开发 和 发 布 都 适用 ) 和 
部 署 过 程 ， 还 会 介绍 如 何 配 置 环境 。 第 二 部 分 探讨 应 用 本 身 的 问题 , 说 明 如 何 实现 简洁 明了 的 模 
块 化 设计 ， 还 会 介绍 开发 现代 应 用 时 需要 考虑 的 实用 设计 因素 。 

下 面 两 节 概 述 这 两 部 分 要 讨论 的 概念 。 
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1.3 构建 过 各 ee 


构建 过 程 涵盖 自动 完成 重复 性 的 任务 , 包括 安装 依赖 、 编 译 代 码 、 运 行 单元 测试 ， 以 及 执行 
其 他 重要 的 操作 。 能 一 步 执行 完 所 有 需要 执行 的 任务 (一 步 构 建 ) 非常 重要 ， 这么 做 优势 明显 。 
只 要 制定 好 了 一 步 构建 方案 ， 想 执行 多 少 次 就 能 执行 多 少 次 ， 而 且 效 有 果 不 变 。 这 种 特性 叫 舌 等 : 
不 管 执行 多 少 次 ， 结 果 都 一 样 。 

图 1-2 更 详细 地 列 出 了 组 成 自动 构建 和 部 署 过 程 的 重要 步骤 。 
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使 用 哪个 发 行 版 取决 于 目标 ) 
环境 和 部 署 需求 5 


图 1-2 ”构建 优先 原则 中 的 构建 和 部 署 过 程 











自动 构建 过 程 的 优 缺 点 

自动 构建 过 程 的 最 大 优点 是 只 要 需要 随时 都 能 部 署 。 功 能 开发 完毕 后 立即 就 让 用 户 使 用 ， 
有 利于 收 罕 反 馈 循环 ， 这 样 我 们 就 能 更 好 地 预见 应 该 开发 什么 样 的 产品 。 

自动 构建 过 程 主要 的 缺点 是 在 真正 获 益 之 前 ， 要 花 一 定 的 时 间 制 定 这 个 过 程 ， 可 是 自 
过 程 的 好 处 绝对 物 超 所 值 , 例如 我 们 能 自动 测试 , 得 到 的 代码 质量 更 高 ， 开 发 流程 更 精益 ， 
且 部 署 流程 更 安全 。 一 般 来 说 ， 这 个 过 程 只 需 设置 一 次 ， 以 后 随时 都 能 人 
的 过 程 中 还 可 以 适当 调整 。 
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1. 构建 

图 1-2 的 上 半 部 分 是 构建 过 程 ( 如 图 1-1 所 示 ) 中 构建 这 一 步 的 详细 说 明 ， 包 含 开 发 和 发 布 两 
方面 的 内 容 。 如 果 你 关注 的 是 开发 ， 就 专注 “调试 ”能 力 ， 我 保证 你 想 要 一 个 无 需 干 预 就 知道 何 
时 应 该 执行 这 些 任 务 的 构建 过 程 。 这 叫 持续 开发 ( Continuous Development， 简 称 CD )， 在 第 3 章 
中 介绍 。 构 建 过 程 中 的 “发 布 ” 和 持续 开发 没有 关系 ， 不 过 你 应 该 花 时 间 优 化 静态 资源 ， 尽 量 让 
应 用 在 生产 环境 中 运行 得 更 快 。 

2. 部 署 
图 1-2 的 下 半 部 分 是 图 1-1 中 部 署 过 程 的 详细 说 明 ,这 部 分 将 调试 或 发 行 版 作为 应 用 发 行 版 ( 我 
在 操作 流程 中 使 用 “发 行 版 ”这 个 词 是 有 特殊 目的 的 ， 全 书 都 会 这 样 用 ) 部 署 到 主机 环境 。 

打包 代码 得 到 的 发 行 版 会 和 环境 相关 的 配置 (用 于 安全 存储 机 密 信息 , 例如 数据 库 连 接 字 符 
串 和 API 密 钥 ， 第 3 章 会 讨论 ) 一 起 ， 服 务 于 应 用 。 

第 一 部 分 专门 讨论 构建 优先 原则 中 构建 方面 的 话题 。 
D 第 2 章 说 明 构建 任务 ， 教 你 如 何 使 用 Grunt 编 写 和 配置 任务 。Grunt 是 任务 运行 程序 ， 第 一 
部 分 会 一 直 使 用 这 个 工具 。 
口 第 3 章 介 绍 环境 ， 如 何 安全 配置 应 用 ， 还 会 介绍 开发 流程 。 
口 第 4 章 讨 论 发 布 构建 版 本 时 应 该 执行 的 任务 。 然 后 介绍 部 署 方面 的 知识 ， 如 何 每 次 推送 到 

版 本 控制 系统 后 都 运行 测试 ， 以 及 如 何在 生产 环境 中 监控 应 用 。 

3. 构建 过 程 的 好 处 
读 完 第 一 部 分 后 你 就 能 自信 地 在 自己 的 应 用 中 执行 下 述 操作 了 。 
口 自动 执行 重复 的 任务 ， 例 如 编译 、 简 化 和 测试 。 
口 制作 图 标 子 图 集 表单 ， 把 对 图 标的 HTTP 请 求 数 减 少 到 只 有 一 个 。 这 种 子 图 技术 和 其 他 的 
HTTP 1.x 优 化 技巧 在 第 2 章 讨论 ， 目 的 是 提升 页 面 的 加 载 速度 和 应 用 的 交付 性 能 。 
口 轻松 搭建 新 环境 ， 忽 略 开发 环境 和 生产 环境 之 间 的 区 别 。 
口 相关 文件 改动 后 自动 重启 Web 服 务 器 ， 以 及 重新 编译 静态 资源 。 
口 通过 灵活 的 一 步 部 署 方案 ， 文 持 多 个 环境 。 

处 理 繁琐 的 任务 时 ,构建 优先 原则 能 节省 人 工 ， 而 且 从 一 开始 就 能 提升 工作 效率 。 构 建 过 程 
在 构建 优先 原则 中 有 重要 意义 ， 能 打造 出 可 维护 的 应 用 ， 还 能 不 断 减 弱 应 用 的 复杂 度 。 

本 书 第 二 部 分 会 讨论 如 何 实现 简洁 的 应 用 设计 和 架构 , 涵盖 应 用 内 的 复杂 度 管理 , 以 及 设计 
时 为 了 提升 质量 要 考虑 的 因素 。 下 面 概述 第 二 部 分 的 内 容 。 


1.4 处 理应 用 的 复杂 度 和 设计 理念 


不 管 使 用 什么 语言 开发 , 如 果 想 保证 代码 在 具有 一 定 规模 时 仍 能 正常 运行 , 就 一 定 要 做 到 以 
下 几 点 : 模块 化 、 管 理 依赖 、 理 解 异 步 流 、 认 真 遵守 正确 的 模式 和 测试 。 在 第 二 部 分 你 会 学 到 不 
同 的 概念 、 技 术 和 模式 ， 运 用 这 些 知识 后 你 的 应 用 就 会 变 得 更 模块 化 、 更 专注 、 更 易于 测试 也 更 
易于 维护 。 在 图 1-3 中 ， 从 上 到 下 就 是 第 二 部 分 的 行文 顺序 。 
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图 1-3 第 二 部 分 要 讨论 的 应 用 设计 和 部 署 方面 的 内 容 





1. 模块 化 

你 会 学 习 如 何 把 应 用 分 成 不 同 的 组 件 , 如 何 再 把 组 件 分 成 不 同 的 模块 , 然后 在 模块 中 编写 作 
用 单一 的 简洁 函数 。 模 块 可 以 由 外 部 包 提 供 ， 由 第 三 方 开 发 ， 也 可 以 自己 开发 。 外 部 包 应 该 交 
给 包 管 理 器 处 理 ， 让 管理 器 管理 版 本 ， 执 行 升级 操作 ， 这 样 就 不 用 我 们 手动 下 载 依 赖 了 (例如 
jQuery ) 一 一 整个 过 程 都 自动 完成 。 

在 第 5 章 你 还 会 学 到 ， 模 块 的 依赖 能 在 代码 中 声明 ， 而 不 用 从 全 局 命名 空间 中 获取 一 一 这 样 
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做 能 让 模块 更 加 独立 。 模块 系统 会 利用 这 些 信息 , 解析 出 所 有 的 依赖 ,， 因 此, 为 了 能 让 应 用 正常 
运行 ， 我 们 就 不 必 按 一 定 顺 序 维护 一 长 串 <script> 标 签 了 。 

2. 设计 

你 会 学 习 如 何 分 离 关 注 点 ， 使 用 “模型 -视图 -控制 器 ”模式 分 层 设计 应 用 ， 进 一 步 增强 应 用 
的 模块 化 。 在 第 7 章 我 会 告诉 你 关于 共享 演 染 的 知识 ， 这 个 技术 首先 在 服务 器 端 演 染 视 图 ， 然 后 
同一 个 单 页 应 用 中 的 后 续 请 求 都 在 客户 端 泻 染 视 图 。 

3. 异步 代码 

我 会 教 你 使 用 不 同 的 异步 代码 流 技术 ， 包 括 回调 、Promise 对 象 、 生 成 器 和 事件 ， 帮 你 驯服 
异步 这 头 猛兽 。 

4. 测试 实践 

第 5 章 会 讨论 模块 化 的 方方面面 ， 学 习 闭 包 和 模块 模式 ， 还 会 讨论 不 同 的 模块 系统 和 包 管 理 
器 ， 并 尝试 找 出 每 种 方案 的 优势 。 第 6 章 会 深入 介绍 JavaScript 中 的 异步 编程 ， 告 诉 你 如 何 避 免 纺 
写 一 周 后 就 会 让 人 困惑 的 回调 ， 然 后 再 学 习 Promise 对 象 和 ES6 中 的 生成 器 API。 

第 7 章 专门 介绍 各 种 模式 和 做 法 ， 例 如 如 何 写 出 最 好 的 代码 ， 对 你 来 说 jQuery 是 不 是 最 好 的 
选择 , 以 及 如 何 编写 在 客户 端 和 服务 器 中 都 能 使 用 的 JavaScript 代 码 。 然 后 介绍 Backbone 这 个 MVC 
框架 。 记 住 ，Backbone 只 是 我 用 来 向 你 介绍 MVC 知 识 的 工具 ， 并 不 是 这 方面 唯一 可 用 的 框架 。 

在 第 8 章 我 们 会 介绍 测试 方案 、 自 动 化 和 很 多 客户 端 JavaScript 单 元 测试 实例 。 你 会 学 到 如 何 
为 单个 组 件 编写 单元 测试 ， 如 何 为 整个 应 用 编写 集成 测试 。 

本 书 最 后 一 章 介 绍 RESTAPI 设 计 ， 如 何在 前 端 使 用 RESTAPI， 以 及 为 了 充分 发 挥 REST 架 构 
的 功能 而 推荐 使 用 的 结构 。 

5. 设计 时 要 考虑 的 实际 问题 

本 书 的 目的 是 让 你 在 开发 真正 的 应 用 时 考虑 一 些 设 计 方面 的 实际 问题 , 充分 考虑 后 再 选择 最 
合适 的 工具 ,始终 注重 过 程 和 应 用 本 身 的 质量 。 当 你 准备 开发 应 用 时 ,首先 要 确定 规模 ,选择 一 
个 技术 栈 ， 再 制定 一 个 最 小 可 行 的 构建 过 程 ， 然 后 开始 开发 应 用 。 你 可 能 会 使 用 MVC 架 构 ， 或 
者 在 浏览 器 和 服务 器 中 都 能 使 用 的 视图 渲染 引擎 , 这 些 话题 在 第 7 章 讨 论 。 在 第 9 章 你 会 学 习 开发 
API 的 重要 知识 ， 还 会 学 习 如 何 定 义 服务 器 端的 视图 控制 器 和 REST API 都 能 用 到 的 后 端 服务 。 
图 1-4 简 要 说 明了 使 用 构建 优先 原则 开发 时 应 用 的 典型 组 织 方式 。 

6. 构建 过 程 

从 图 1-4 的 左上 角 开 始 看 ， 可 以 看 出 ,我们 首先 要 制定 一 个 构建 过 程 ， 这 样 有 助 于 开始 着 手 
架构 应 用 , 还 要 决定 如 何 组 织 代码 基 。 定义 一 个 模块 化 的 应 用 架构 对 可 维护 的 代码 基 来 说 是 至 关 
重要 的 ， 在 第 $ 章 你 会 看 出 这 一 点 。 然 后 还 要 实现 过 程 自动 化 ， 提 供 持续 开发 、 持 续集 成 和 持续 
部 署 功 能 ， 以 此 增强 架构 。 

7. 设计 和 REST API 

设计 应 用 本 身 ， 以 及 能 显著 提升 可 维护 性 的 REST API 时 ， 一 定 要 明确 每 个 组 件 的 作用 ， 让 
组 件 之 间 形 成 正 交 关系 ( 意思 是 , 组 件 之 间 在 任何 方面 都 不 会 争夺 资源 )。 在 第 9 章 我 们 会 探讨 一 
种 设计 应 用 的 多 层 方 式 ， 我 们 会 严格 定义 各 层 以 及 层 与 层 之 间 的 通信 和 路径, 把 Web 界 面 与 数据 和 
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8. 积极 测试 

设计 好 构建 过 程 和 架构 后 , 我 们 要 积极 测试 , 关注 可 靠 性 方面 的 问题 。 我 们 要 探索 持续 集成 ， 
每 次 把 代码 推送 到 版 本 控制 系统 后 都 要 执行 测试 ; 或 许 还 要 探索 持续 开发 , 每 天 多 次 把 应 用 部 署 
到 生产 环境 。 我 们 还 会 讨论 容错 方面 的 知识 , 例如 记录 日 志 、 监 控 和 搭建 集群 。 这 些 内 容 会 在 第 
4 章 概述 ， 为 的 是 让 生产 环境 更 稳健 ， 至 少 在 出 问题 时 能 提醒 你 。 

在 这 个 过 程 中 我 们 会 编写 测试 ， 调 整 构建 过 程 ， 还 会 微调 代码 。 对 你 来 说 ， 这 是 个 好 机 会 ， 
能 让 你 仔细 审视 构建 优先 原则 。 驾 轻 就 熟 后 ， 再 开始 学 习 构 建 优 移 原 则 的 细节 。 


1.5 钻研 构建 优先 原则 


质量 是 构建 优先 原则 的 基石 , 这 个 原则 采取 的 每 项 措施 都 是 为 了 一 个 简单 的 目标 , 即 提升 代 
码 的 质量 , 并 使 用 更 合理 的 方式 组 织 代码 。 在 本 节 你 要 学 习 代 码 质 量 方面 的 知识 ,以 及 如 何在 命 
令 行 使 用 检查 代码 质量 的 工具 : int 程序。 衡量 代码 的 质量 是 向 编写 结构 良好 的 应 用 迈 出 的 第 一 
步 。 尽 早 这 么 做 容易 让 代码 基 符 合 一 定 的 质量 标准 ， 所 以 接 下 来 我 们 就 要 来 做 这 件 事 。 

学 会 使 用 Int 程序 后 , 在 第 2 章 我 会 介绍 如 何 使 用 Grunt。 本 书 会 一 直 使 用 这 个 构建 工具 制定 自 
动 化 构建 过 程 。 使 用 Grunt 能 在 构建 过 程 中 检查 代码 质量 ， 以 防 你 忘记 做 这 件 事 。 

































































































































































Grunt: 实现 自动 化 的 工具 

第 一 部 分 会 大 量 使 用 Grunt， 第 二 部 分 也 会 适量 使 用 。 我 们 使 用 这 个 工具 实现 构建 过 程 。 
选择 Grunt 是 因为 它 很 流行 ， 而且 易 于 学 习 ， 能 满足 大 多 数 人 的 需求 : 
口 完全 支持 Windows; 
口 使 用 时 只 需 少 量 的 JavaScript 知 识 ， 而且 易于 安装 和 运行 。 

记 住 ，Grunt 只 是 一 种 工具 ， 使 用 它 能 轻 罗 实 现 本 书 介 绍 的 构建 过 程 ， 并 不 是 说 Grunt 始 终 
是 最 佳 选择 。 为 了 明确 这 一 点 ， 我 会 把 Grunt 和 另外 两 个 工具 做 对 比 : 一 个 是 npm， 这 是 一 个 
包 管 理 器 ， 也 能 当 作 简单 的 构建 工具 使 用 ; 另 一 个 是 Gulp， 这 是 一 个 由 代码 驱动 的 构建 工具 ， 
和 Grunt 有 很 多 共同 点 。 

如 果 你 对 其 他 构建 工具 (例如 Gulp ) 好 奇 ， 或 者 想 把 npm run 当 成 构建 系统 使 用 ， 请 阅读 
附录 C， 其 中 详细 说 明了 如 何 选 择 合适 的 构建 工具 。 

















lint 程 序 是 检查 代码 质量 的 工具 ， 特 别 适合 用 来 检查 使 用 解释 型 语言 ( 例如 JavaScript ) 编写 
的 程序 。 我 们 不 用 打开 浏览 器 检查 代码 是 否 有 句法 错误 ， 在 命令 行 中 执行 jint 程 序 就 能 找 出 代码 


中 潜在 的 问题 ， 例 如 未 声明 的 变量 、 缺 少 分 号 或 句法 错误 。 不 过 lint 程 序 也 不 是 万 能 的 ， 它 检测 
不 到 代码 中 的 逻辑 问题 ， 只 能 提醒 句法 和 风格 错误 。 





















































1.5.1 检查 代码 质量 
lint 程 序 能 判断 给 定 的 代码 片段 中 有 没有 句法 错误 ， 还 能 实施 一 些 JavaScript 编 程 的 最 佳 实践 
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规则 。 第 二 部 分 的 开头 第 5 章 ， 在 讨论 模块 化 和 依赖 管理 时 会 介绍 这 些 最 佳 实践 。 

大 约 10 年 前 ，Douglas Crockford 发 布 了 JSLint。 这 个 工具 检查 代码 时 很 严格 ， 会 报告 代码 中 
所 有 的 小 问题 。lint 程 序 的 作用 是 帮助 我 们 提升 代码 的 整体 质量 。lint 程 序 直接 在 命令 行 中 执行 ， 
能 报告 代码 片段 或 文件 中 潜在 的 问题 。 这 么 做 有 个 额外 好 处 , 我 们 其 至 不 用 执行 代码 就 能 找 出 问 
题 。 对 JavaScript 代 码 来 说 ， 这 个 过 程 特别 有 用 ， 因 为 在 某 种 程度 上 ，lint 程 序 可 以 当做 编译 器 ， 
尽量 确保 代码 能 被 JavaScript3 引 擎 解释。 

除 此 之 外 ， 我 们 还 能 配置 lint 程 序 ， 让 它 发 现 太 复杂 的 代码 时 提醒 我 们 ， 比 如 说 行 数 太 多 的 
函数 ， 可 能 会 让 别人 困惑 的 星 誉 结构 ( 对 JavaScript 来 说 ,例如 with 块 ，newi 语 句 ， 或 者 过 度 使 用 
this )， 诸 如 此 类 的 代码 风格 问题 。 以 下 述 代码 片段 为 例 (位 于 在 线 示例 的 ch01/01_lint-sample 
































文件 夹 中 ): 
function compose ticks_ count (start) { 
start ,|.|' tart SL 


this.counter = start; 
return function (time) { 

ticks = +new Date; 

return ticks + '_' + this.counter++ 
} 

} 

这 么 一 小 段 代码 中 有 很 多 问题 ， 不 过 可 能 很 难 发 现 。 使 用 JSLint 分 析 这 段 代码 时 ， 既 会 得 到 
预料 之 中 的 结果 ， 也 会 得 到 意料 之 外 的 结果 。JSLint 会 提醒 你 ， 变 量 在 使 用 之 前 必须 先 声明 ， 而 
且 缺 少 分 号 。 如 果 使 用 其 他 lint 程 序 ， 可 能 还 会 抱怨 你 使 用 了 this 关 键 字 。 大 多 数 lint 程 序 都 会 抱 
怨 你 使 用 了 | 1 运算 符 , 而 没 使 用 更 易于 阅读 的 if 语 句 。 你 可 以 在 线 检查 这 段 代码 。" 图 1-5 是 使 用 
Crockford 的 工具 检查 得 到 的 结 

对 编译 型 语言 来 说 ， 这 些 错误 类 型 在 编译 代码 时 就 能 捕获 ， 因 此 不 需要 使 用 lint 工 具 。 而 
JavaScript 没 有 编译 器 , 这 是 由 这 门 语言 的 动态 特性 决定 的 。 这 种 方式 无 疑 很 强大 , 但 和 编译 型 语 
言 相 比 却 更 容易 出 错 ， 一 开始 代码 甚至 无 法 执行 。 

JavaScript 代 码 无 需 编译 ， 由 引擎 解释 执行 ， 例 如 V8 ( Google Chrome 使 用 的 引擎 ) 和 
SpiderMonkey( Mozilla Firefox 使 用 的 引擎 )。 虽然 有 些 引擎 ( 最 著名 的 是 V8 引 擎 ) 会 编译 JavaScript 
代码 ， 但 在 浏览 器 之 外 享受 不 到 静态 代码 分 析 的 好 处 。 ” 像 JavaScript 这 样 的 动态 语言 有 个 缺点 ， 
执行 代码 时 无 法 确保 代码 一 定 能 正常 运行 。 虽 然 如 此 ， 但 是 使 用 lint 工 具 能 大 大 降低 这 种 不 确定 
性 。 而 且 JSLint 还 会 建议 我 们 不 要 使 用 某 种 编程 风格 ， 例 如 使 用 了 eval ， 没 声明 变量 ， 语 句 块 缺 
少 花 括号 等 。 

你 发 现 前 面 代码 片段 中 的 函数 有 什么 问题 了 吗 ? 看 一 下 本 书 的 配套 代码 示例 (ch01/01_lint- 
sample 文 件 夹 )， 验 证 一 下 自己 的 答案 。 提 示 : 问题 是 有 重复 。 修 正 后 的 版 本 也 在 源码 示例 中 ， 
你 一 定 要 看 一 下 好 的 写法 。 





































































































中 访问 http://jslint.com/， 然 后 输入 这 段 代 码 。 这 是 最 先 出 现 的 JavaScript lint 工 具 ， 由 Crockford 维 护 。 
@) 在 终端 使 用 Node:js 能 获得 这 个 功能 , 但 V8 引擎 检测 到 句法 问题 时 已 经 太 晚 了 ,此 时 程序 会 衣 演 。Node.js 是 服务 器 
端 JavaScript 平 台 ， 也 运行 在 V8 引擎 之 上 。 
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全 日 日 到 |suint,The JavaScript Code x we 
€ CG jslint.com » 三 
am 攻 志 
Missing 'use strict statement. line 2 character 3 
start || start = 1; 
Weird condition. line 2 character 9 
start || start = 1; 
‘ticks' was used before it was defined. line 5 character 5 


ticks = +new Date; 

Missing '() line 5 character 22 
ticks = +new Date; 

Unexpected '+'. line 5 character 13 


ticks = +new Date; 


‘ticks' was used before it was defined. line 6 character 12 
return ticks + '_' + this.counter++ 

Unexpected ‘++'. line 6 character 39 
return ticks + '_' + this.counter++ 

Expected ;and instead saw '}'. line 6 character 41 


return ticks + '_’ + this.counter++ 
Unused (time '. line 4 character 20 
return function (time) { 
Expected '; and instead saw '}'. line 7 character 4 
} 











图 1-5 在 一 段 代码 中 发 现 的 错误 


对 本 书 配套 源码 的 说 明 

本 书 的 配套 源码 包含 很 多 重要 的 信息 ,例如 上 述 示例 函数 有 一 个 调整 后 的 版 本 ,能 通过 lint 
程序 的 验证 , 而 且 有 很 多 注释 ,便于 理解 改动 的 部 分 。 这 个 示例 也 证 明了 lint 程 序 不 是 万 能 的 。 

本 书 配套 源码 中 的 其 他 代码 示例 也 有 类 似 的 建议 和 重要 的 信息 , 所 以 一 定 要 看 一 下 ! 配套 
源码 中 的 示例 按 章 组 织 , 而 且 和 在 书 中 出 现 的 顺序 一 致 。 很 多 示例 在 书 中 只 有 简单 讨论 , 不 过 
在 配套 源码 中 所 有 代码 示例 都 有 完整 的 注释 ， 拿 来 就 可 以 使 用 。 

书 中 的 代码 和 配套 源码 之 间 出 现 这 种 差异 是 因为 ,有 时 我 想 说 明 某 个 话题 , 但 可 能 涉及 的 
代码 太 多 , 在 书 中 不 能 全 部 列 出 。 遇 到 这 种 情况 时 , 我 不 想 太 过 偏离 要 讲解 的 概念 ,又 想 给 你 
提供 真实 的 代码 。 使 用 这 种 方式 , 在 阅读 本 书 的 过 程 中 能 让 你 集中 精力 学 习 , 浏览 代码 示例 时 
再 集中 精力 去 试验 。 
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通常 , 写 完 代码 后 第 一 件 事 就 是 使 用 lint 程 序 检查 , lint 程 序 发 现 不 了 的 问题 则 交 给 单元 测试 。 
这 并 不 意味 着 没 必 要 使 用 lint 程 序 ， 而 是 说 仅 使 用 lint 程 序 是 不 够 的 。 单 元 测试 的 作用 是 确保 代码 
的 表现 与 预期 一 样 。 单 元 测试 在 第 8 章 讨论 ， 你 会 学 习 如 何 为 第 二 部 分 编写 的 代码 编写 测试 。 第 
二 部 分 的 内 容 旨 在 说 明 如 何 编写 模块 化 、 可 维护 和 可 测试 的 JavaScript 代 码 。 

接 下 来 我 们 要 从 零 开始 制定 一 个 构建 过 程 。 我 们 从 简单 的 任务 开始 ， 先 编写 一 个 运行 Int 程 
序 检查 代码 的 任务 , 然后 在 命令 行 中 运行 这 个 任务 , 就 像 使 用 编译 器 编译 代码 的 过 程 一 样 。 你 会 
学 着 养 成 习惯 ,每 次 修改 代码 后 都 执行 这 个 任务 ， 查看 代码 是 否 能 够 通过 lint 程 序 的 检查 。 第 3 章 
会 教 你 如 何 自动 执行 这 个 任务 ， 这 样 就 不 必 每 次 都 手动 执行 了 。 不 过 现在 可 以 手动 执行 。 

“如 何 直 接 在 命令 行 中 使 用 JSLint 这 样 的 lint 工 具 呢 ?” 我 很 高 兴 你 能 提出 这 个 问题 。 


1.5.2 ”在 命令 行 中 使 用 lint 工 具 


巴 任务 添加 到 构建 过 程 最 常见 的 方式 之 一 , 是 在 命令 行 中 执行 这 个 任务 。 如 果 能 在 命令 行 中 
执行 任务 ， 那么 这 个 任务 就 能 轻易 集成 到 构建 过 程 中 。 下 面 介 绍 如 何 使 用 JSHint" 检 查 你 的 软件 。 

JSHint 是 一 个 命令 行 工 具 ， 使 用 Nodejs 编 写 ， 用 于 检查 JavaScript 文 件 和 代码 片段 。Nodejs 
是 一 个 使 用 JavaScript 开 发 应 用 的 平台 ， 如 果 你 想 简 单 了 解 Node,js 的 基础 知识 ， 可 以 翻 到 附录 和 A， 
在 这 篇 附录 中 我 说 明了 什么 是 模块 ,以 及 模块 的 工作 方式 。 如 果 你 想 深 入 学 习 Nodejs, 可 以 阅读 
Mike Cantelon 等 人 写 的 《Node.js 实 战 》 掌握 Node.js 的 知识 也 有 助 于 使 用 下 一 章 我 们 选 定 的 构建 
工具 一 一 Grunt。 
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Node.js 简 介 

Nodejs 是 相对 较 新 的 平台 ， 你 肯定 听 说 过 。Node 最 初 于 2009 年 发 布 ， 遵 从 事件 驱动 和 单 
线程 模式 ， 能 高 效 并 发 处 理 请 求 。 从 这 方面 来 看 ，Node 和 Nginx 的 设计 理念 一 致 。Nginx 有 是 高 
度 可 伸缩 的 多 用 途 反 向 代理 服务 器 ,非常 流行 ,作用 是 伺服 静态 内 容 ， 以 及 把 请 求 转发 给 应 用 
服务 器 (例如 Node )。 

Node.js 广 受 赞 誉 ， 尤 其 是 对 前 端 工程 师 来 说 ， 特 别 容易 上 手 ， 因 为 大 致 而 言 ， 它 只 不 过 
是 在 服务 器 端 运行 的 JavaScript。 Node.js 还 能 把 前 端 完全 从 后 端 抽象 出 来 ”, 只 通过 数据 和 REST 
API 接 口交 互 。 我 们 在 第 9 章 就 会 使 用 这 样 的 方式 设计 和 开发 应 用 。 


1. 安装 Nodejs 和 JSHint 

安装 Nodejs 和 JSHint 命 令 行 界面 ( Command-line Interface, 简称 CLI ) 的 步 又 如 下 。 安 装 Node.js 
的 其 他 方式 和 排除 故障 的 方法 参见 附录 A。 

访问 http:/nodejs.org， 点 击 页 面 中 的 “INSTALL” 按 钮 (如 图 1-6 )， 下 载 最 新 版 Node.js。 

运行 下 载 得 到 的 文件 ， 按 照 安 装 说 明 安装 。 























关于 JSHint 更 多 的 信息 ， 请 访问 http://jshint.com。 
@ 关于 把 前 端 从 后 端 抽象 出 来 的 更 多 信息 ， 请 访问 http://bevacqua.io/bf/node-frontend。 
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e009 node.js x 
所 © nodejs.org ,三 
ne@decG 
HOME | DOWNLOADS | DOCS | COMMUNITY | ABOUT | JOBS | BLOG 
Node.js® isa platform built on Chrome's JavaScript runtime for easily building fast, scalable network 
applications. Node,js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, 
perfect for data-intensive real-time applications that run across distributed devices, 
Current Version: vO.10.32 
图 1-6 ”Node.js 的 网 站 

Ve) = er 人 7 日 A A > A 和 
安装 完成 后 会 得 到 一 个 命令 行 工具 ， 名 为 npm (Node Package Manager 的 简称 )， 因 为 这 个 工 








具 和 Node.js 是 拥 绑 在 一 起 的 。npm 是 个 包 管理 器 ， 在 终端 里 使 用 ， 用 于 安装 、 发 布 和 管理 Node,js 














项 目 用 到 的 模块 。 包 可 以 安装 在 各 个 项 目 中 , 也 可 以 全 局 安装 一 一 这 样 更 便于 从 终端 





这 两 种 安装 方式 之 间 的 区 别 是 ， 全 局 安装 的 包 存 放 在 环境 变量 PaT 

















周 用 。 其实， 
H 对 应 的 文件 夹 中 ， 而 为 一 种 





安装 方式 把 包 存放 在 一 个 名 为 node_modules 的 文件 夹 中 ,而 这 个 文件 夹 位 于 执行 安装 命令 所 在 
的 文件 夹 中 。 为 了 让 项 目 自 成 一 体 ， 都 推荐 把 包 安 装 在 项 目 中 。 不 过 ， 对 JSLint 这 样 的 实用 工具 
来 说 ,我 们 希望 在 整个 系统 中 都 能 使 用 ,因此 全 局 安装 更 合适 ,修饰 符 -g 能 让 npm 全 局 安装 JSHint。 
使 用 这 种 方式 安装 ， 我 们 能 在 命令 行 中 通过 jshint 命 令 使 用 JSHint。 






































打开 你 最 喜欢 的 终端 ， 执 行 npm install -g jshint 命 令 ， 如 











图 1-7 所 示 。 如 果 安 装 失 败 ， 


可 能 要 使 用 sudo 提 升 权限 ， 例 如 sudo npm install -g jshint。 


OED nico@ubuntu: ~ 


» npm install -9 jshtnt --LogLeveL warn 


/honme/nico/.nvmn/ve.10.23/bin/ishint -> /home/ntco/.nvm/ve.16.23/Ltib/node_modutes/ 


jshtnt/btn/jshtnt 
shtnt@2.4.6 /home/nico/.nvm/ve.16.23/lib/node_modules/jshint 
consoLe-browsertify66.1.6 


underscore@1.4.4 
sheLLjs6o.1.4 
minitmatcheoe.2.14 (signund@1.6.0, lru-cache@2.5.0) 
htmlparser2@3.3.0 (domelementtype@1.1.1, domutils@1.1.6, domhandler@2.1.6, re 
adable-stream@1.96.17) 
[一 clige.4.5 (glob@3.2.7) 


“有 





图 1-7 使 用 npm 安 装 JSHint 
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执行 jshint --version。 这 个 命令 应 该 输出 JSHint 的 版 本 号 ， 如 图 1-8 所 示 。 你 看 到 的 版 
本 号 可 能 和 图 中 不 一 样 ， 因 为 开发 活跃 的 包 经 常会 变更 版 本 号 。 


OO nico@ubuntu:~ 








» jshint --version 


i " V2.4.0 





图 1-8 在 终端 里 验证 jshint 可 用 


下 一 节 说 明 如 何 检查 代码 。 

2. 检查 代码 

你 现在 应 该 在 系统 中 安装 好 了 JSHint， 而 且 已 经 确认 可 以 在 终端 里 调用 。 如 果 想 使 用 JSHint 
检查 代码 ， 可 以 使 用 ca 命令 进入 项 目的 根 目录 ， 然 后 输入 jshint . (点 号 告诉 JSHint 检 查 当前 
文件 夹 里 的 所 有 文件 )。 如 果 执 行 的 时 间 太 长 ,或 许 要 加 上 --exclude node_modules 选 项 , 告 
诉 JSHint 只 检查 自己 编写 的 代码 ， 忽 略 通 过 npm install 安 装 的 第 三 方 代码 。 

命令 执行 完毕 后 ,你 会 看 到 一 份 详细 报告 ,说 明代 码 的 状况 。 如 果 代 码 中 有 问题 , 这 个 工具 
会 报告 预期 的 结果 和 出 现 问 题 的 行 号 ,然后 退出 ,返回 一 个 错误 码 。 如 果 通 不 过 检查 ,我 们 可 以 
使 用 这 个 错误 码 中 断 构建 过 程 。 只 要 有 构建 任务 没 得 到 预期 的 输出 ， 整 个 构建 过 程 就 应 该 中 止 。 
这 么 做 有 很 多 好 处 ， 出 错 后 不 会 继续 运行 ， 在 问题 解决 前 不 会 完成 整个 构建 过 程 。 图 1-9 显 示 的 
是 检查 某 段 代 码 后 得 到 的 结果 。 


OO nico@ubuntu: ~/nico/git/buildfirst/cho1/01_lint-sample 
[9 latest 


» jshint . 

sample.js: line 2, col 18, Bad assignment. 

sample.js: line 2, col 18, Expected an assignment or function 
call and tnstead saw an expression. 

ED Ltne 2，cot 19，NMtsstng Semtcoton, 

sampLe.js: line 2, col 26，Expected an assignment or function 
call and instead saw an expression. 

sample,.js: line 5, col 18, Missing '()' invoking a constructor 








































































































sample.js: line 6, col 41, Missing semicolon. 
sampte.-js: Ltne 7，cot 4，NMitssing semtcotLon . 


sample,jslint,.js: line 8, col 3, Possible strict violation. 


8 errors 
f 








图 1-9 在 命令 行 中 使 用 JSHint 检 查 代码 


安装 好 JSHint 之 后 你 可 能 就 想 收 工 了 ， 因 为 这 是 你 唯一 的 任务 。 可 是 ， 如 果 想 在 构建 过 程 中 
增加 任务 ,还 不 方便 。 你 或 许 想 在 构建 过 程 中 增加 一 步 ， 运 行 单元 测试 ， 这 时 就 会 遇 到 问题 ， 
为 你 现在 至 少 要 执行 两 个 命令 : 一 个 是 jshint ， 男 一 个 是 运行 测试 的 命令 。 这 样 做 的 伸缩 性 不 
好 ， 你 要 记 住 如 何 使 用 jshint， 还 有 很 多 其 他 命令 及 其 参数 ， 太 麻烦 ， 难 记 ， 而 且 容 易 出 错 。 
你 肯定 不 想 损失 五 亿美 元 吧 ! 
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那么 你 最 好 把 构建 任务 放 在 一 起 , 虽然 现在 只 有 一 个 任务 , 但 很 快 就 会 变 多 。 制 定 构建 过 程 
时 要 考虑 自动 化 ， 避 人 免 重复 各 个 步骤 ， 以 节省 时 间 。 

每 门 语言 都 有 多 个 专用 的 构建 工具 , 而 且 多 数 情况 下 都 有 一 个 工具 比较 出 众 , 使 用 范围 比 其 
他 工具 广 。 对 JavaScript 来 说 ，Grunt 是 最 受 欢迎 的 构建 工具 之 一 ， 有 成 千 上 万 个 插件 ( 辅助 构建 
任务 ) 供 使 用 。 如 果 你 要 为 其 他 语言 制定 构建 过 程 ， 或许 需要 自己 搜索 ， 找 到 合适 的 工具 。 虽然 
本 书 编写 的 构建 任务 是 针对 JavaScript 的 ， 而 且 使 用 Grunt， 不 过 我 讲 的 原则 应 该 能 应 用 于 任何 语 
言 和 构建 工具 。 

翻 到 第 2 章 ， 看 看 如 何 把 JSHint 集 成 到 Grunt 中 ， 以 此 开启 制定 构建 过 程 的 旅程 。 


















































1.6 ”总结 


本 章 概览 了 本 书后 面 几 章 要 深入 探讨 的 概念 。 下 面 列 出 你 在 本 章 学 到 的 内 容 。 
口 现代 JavaScript 应 用 开发 是 有 问题 的 ， 因 为 缺少 对 设计 和 架构 的 重视 。 
口 使 用 构建 优先 原则 能 得 到 自动 化 的 过 程 ， 设 计 出 可 维护 的 应 用 ， 而 且 鼓 励 思 考 你 所 开发 
的 应 用 。 
口 学 会 了 使 用 lint 程 序 检查 代码 ， 不 使 用 浏览 需 就 提升 了 代码 质量 。 
口 在 第 一 部 分 你 会 学 习 构 建 过 程 、 部 署 和 环境 配置 的 所 有 知识 。 你 将 使 用 Grunt 开 发 构建 过 
程 ， 在 附录 C 中 还 能 学 习 可 以 使 用 的 其 他 工具 。 
口 第 二 部 分 专门 说 明 应 用 设计 的 复杂 性 。 模 块 化 、 异 步 代码 流 、 应 用 和 API 设 计 ， 以 及 可 测 
试 性 都 有 一 定 的 作用 ， 会 在 第 二 部 分 介绍 。 
说 到 使 用 构建 优先 原则 设计 应 用 的 好 处 ， 现 在 你 只 看 到 了 皮毛 ， 还 有 很 多 知识 要 学 。 下 面 
我 们 进入 第 2 章 ， 讨 论 构建 过 程 中 最 可 能 要 执行 的 任务 ， 再 通过 示例 说 明 如 何 使 用 Grunt 实 现 这 
些 任务 。 
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本 章 内 容 

口 理解 在 构建 过 程 中 应 该 做 什么 
口 学 习 关 键 的 构建 任务 

口 使 用 Grunt 执 行 关键 的 构建 任务 
口 使 用 Grunt 配 置 构建 流程 

口 自己 编写 Grunt 任 务 





























前 一 章 简单 概述 了 构建 优先 原则 ， 还 稍微 提 到 了 一 个 使 用 lint 程 序 检查 代码 的 任务 。 本 章 我 
们 要 介绍 一 些 常 见 的 构建 任务 ， 还 会 介绍 一 些 高 级 任务 。 我 会 告诉 你 这 些 任务 的 使 用 场景 , 以 及 
使 用 它们 的 原因 ， 然 后 介绍 如 何 使 用 Grunt 实 现 。 学 习 理论 的 过 程 可 能 很 枯燥， 但 如 果 你 想 使 用 
Grunt 之 外 的 任务 运行 程序 一 我 相信 最 终 你 会 这 么 做 的 一 理论 就 显得 尤为 重要 了 。 

Grunmt 是 由 配置 驱动 的 构建 工具 ， 能 轻易 执行 复杂 的 任务 ， 只 要 你 知道 你 想 做 什么 就 行 。 合 
用 Grunt 能 制定 出 我 在 第 1 章 说 过 的 那 种 工作 流程 ， 提 高 开发 效率 ， 并 优化 发 布 流程 。 而 且 在 部 署 
过 程 中 Grunt 也 能 提供 帮助 ， 这 一 点 将 在 第 4 章 详 述 。 

本 章 关注 的 是 构建 任务 ， 不 会 教 你 Grunt 的 全 部 知识 。 只 要 理解 了 工具 目标 背后 的 概念 ， 就 
能 学 会 使 用 工具 ,但 如 果 不 理 解 这 些 基本 概念 ,肯定 学 不 会 如 何 正确 使 用 其 他 工具 。 如 果 你 想 深 
入 学 习 Grunt, 可 以 阅读 附录 B。 阅 读 该 附录 对 理解 本 章 的 内 容 没有 帮助 不 过 这 篇 附录 讲解 了 第 
一 部 分 会 用 到 的 Grunt 功 能 。 

本 章 首先 简要 介绍 Grunt 及 其 核心 概念 ， 剩 下 的 内 容 则 教 你 构建 任务 的 知识 ， 还 会 教 你 使 用 
一 些 不 同 的 工具 。 我 们 会 学 习 预 处 理 任务 ， 例 如 把 代码 编译 成 另 一 种 语言 ， 还 会 学 习 后 处 理 任务 
如 简化 静态 资源 、 创 建 图 像 子 图 集 ， 以 及 代码 完整 性 任务 如 运行 JavaSeript 单 元 测试 、 使 用 lint 程 
序 检查 CSS 代 码 。 随 后 我 们 会 学 习 如 何 使 用 Grunt 自 己 编写 任务 ,我 会 举 一 个 案例 , 教 你 编写 一 套 
数据 库 模式 更 新 任务 ， 这 个 任务 还 支持 回 滚 操作 。 

我 们 开始 学 习 吧 ! 
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2.1 介绍 Grunt 


Grunt" 是 一 个 任务 运行 程序 ,能 帮 你 执行 命令 、 运 行 JavaScript 代 码 , 还 能 使 用 完全 由 JavaScript 
编写 的 代码 配置 各 个 任务 。Grunt 的 构建 概念 借鉴 自 Ant， 让 你 使 用 JavaScript 定 义 自己 的 流程 。 

图 2-1 是 从 较 高 层次 上 对 Grunt 进 行 的 详细 解析 , 展示 了 如 何 配置 Grunt 以 及 定义 构建 任务 时 需 
要 理解 的 关键 概念 。 
口 任务 用 于 执行 操作 。 
口 目标 定义 任务 的 上 下 文 。 
口 任务 的 配置 决定 具体 的 任务 和 目标 组 合 使 用 哪些 选项 。 












































任务 定义 一 项 操作 的 和 目标 用 于 配置 任务 ， 给 任务 提供 执 
一 般 作用 。 任务 目标 行 的 上 下 文 。 

把 CoffeeScript 编 译 编译 :controllers 这 个 任务 要 处 理 哪些 文件 ? 

成 JavaScript。 ee 





:templates ] 文 i 
简化 ;不 日 日 | 和 友 . 八 立 件 ' 
:javascript 还 是 分 别 简 化 各 个 文件 ? 
OONCrEGLers 这 个 任务 应 该 如 何 报告 结果 ? 
人 ER 这 个 任务 应 该 如 何 报告 结果 ? 
运行 单元 测试 。 单元 测试 人 测试 在 哪里 启 生 


图 2-1” ”Grunt 一 览 : 任务 和 目标 都 在 配置 中 


Grunt 任 务 使 用 JavaScript 代 码 配 置 。 大 多 数 情 况 下 ， 配 置 都 是 通过 把 一 个 对 象 传 给 grunt. 
initConfig 方 法 完成 的 。 在 配置 中 可 以 指明 任务 会 作用 于 哪些 文件 ， 还 能 传 入 一些 选 项 ， 调 整 
某 个 任务 目标 的 行为 。 

对 运行 单元 测试 的 任务 来 说 , 在 本 地 开发 时 你 可 能 只 想 运 行 几 个 测试 , 或 者 在 发 布 用 于 生产 
环境 的 版 本 前 运行 所 有 测试 。 

图 2-2 展 示 了 用 于 配置 的 JavaScript 代 三， 详细 说 明了 grunt .initconfig 方 法 及 其 约定 。 枚 
举 文件 时 可 以 使 用 通配符 ， 而 使 用 这 种 模式 叫 通 配 。2.2.2 节 会 详细 说 明 通 配 模式 。 

任务 可 以 从 插件 中 导入 。 插 件 是 Node 模 块 ( 设计 良好 、 自 成 一 体 的 代码 )， 包 含 一 个 或 多 
个 Grunt 任 务 。 你 只 需要 知道 插件 能 使 用 哪些 配置 ， 任 务 本 身 则 由 插件 处 理 。 本 章 会 大 量 使 用 
插件 。” 

你 也 可 以 自己 编写 任务 ，2.4 节 和 2.5 节 会 介绍 方法 。Grunt 自 带 了 一 个 CLI ( Command-Line 
Interface， 命令 行 接口 )， 名 为 grunt ， 提 供 了 一 个 简单 的 接口 ， 用 于 直接 在 命令 行 中 执行 构建 任 
务 。 下 面 我 们 来 安装 Grunt。 


简化 JavaScript 文 件 。 









































































































































人 关于 Grunt 的 更 多 信息 请 访问 http:/bevacqua.io/bfygrunt， 也 可 以 阅读 附录 B。 
@ Grunt 插 件 可 以 在 线 搜索 ， 地 址 是 http://gruntjs.com/plugins。 
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任务 的 配置 通 配 
任务 使 用 普通 的 JavaScript FF 人 pp 
对 象 配置 。 files: ['public/controllers/**/*.js' 

I 
配置 定义 处 理 哪些 文件 ， 可 以 使 用 通 配 模式 指明 任务 要 
个 任务 目标 使 用 什么 选 次 项。 处 理 哪些 文件 。 
六 
files: ['test/services/**/*.js'], 
提 : 供 了 合理 的 默认 值 options: { 


1 \ 认 全 7 i reporter: 'verbose' 
} 
} 





Et 
很 二 





ER IO 和 pn 
配置 通过 这 个 API 提供 ,一 9 TU 
compile: 


a i { 
各 个 任务 在 配置 对 象 中 files;s [public/eontrollens/ Yo S7] 


更 用 一 个 属性 表示 。 











services: 
files: Eg = 








各 个 目标 在 对 应 的 任务 
中 使 用 一 个 属性 表示 。 






























































图 2-2 ”Grunt 任 务 配置 的 代码 详解 图 。 每 个 任务 和 任务 目标 都 单独 配置 。 


2.1.1 安装 Grunt 





你 应 该 已 经 安装 ne 因为 在 第 1 章 安 装 lint 工 具 JSHint 时 安装 了 Node.js， 而 Nodejs 中 就 有 
包 管 理 器 apm。Grunt 的 安装 方法 很 简单 ， 在 终端 里 执行 下 述 命令 就 能 安装 grunt 的 CLI: 


npm install -9 grunt-cli 


-9 标志 表明 这 个 包 要 全 局 安装 , 这 样 不 管 当 前 工作 目录 是 什么 ,都 能 在 终端 里 执行 grunt 命 令 。 

















找到 本 书 配套 源码 中 有 注解 的 示例 

本 书 的 配套 源码 中 有 完整 可 用 的 示例 。 这 一 节 的 示例 在 ch02 目 录 里 的 01 intro-to-grunt 文 件 
夹 中 ,本 章 其 他 的 示例 也 在 ch02 目 录 里 。 大 部 分 示例 都 有 代码 注解 ， 在 你 产生 困惑 时 能 帮助 你 
理解 。 


接 下 来 你 需要 创建 一 个 名 为 package.json 的 清单 文件 。 这 个 文件 用 于 描述 Node.js 项 目 ， 指 明 








关于 Grunt 的 更 多 信息 ， 请 访问 http://bevacqua.io/bf/grunt。 
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项 目 依 赖 的 包 列表 ， 还 有 一 些 元 信息 ， 例 如 项 目 名 称 、 版 本 、 描 “ 述 和 主页 。 为 了 能 在 你 的 项 目 中 
使 用 Grunt， 你 需要 把 它 添加 到 package.json 文 件 中 ， 作 为 一 个 开发 依赖 。 之 所 以 作为 开发 依赖 ， 
是 因为 除了 本 地 开发 环境 之 外 ， 在 其 他 地 方 用 不 到 Grunt。 你 可 以 创建 一 个 最 简单 的 package.json 
文件 ， 写 入 下 述 JSON 代 码 ， 并 把 这 个 文件 保存 到 项 目的 根 目录 中 : 

{} 

这 样 就 行 了 。 只 要 package.json 文 件 存 在 ， 而 且 包 含 一 个 有 效 的 JSON 对 象 ， 哪 怕 是 空 对 象 {} 
也 行 ，Node 包 管理 器 (npm ) 就 能 向 其 中 添加 依赖 。 

1. 在 本 地 安装 Grunt 

接 下 来 要 安装 grunt 包 。 这 一 次 我 们 不 能 使 用 -g 修 饰 符 了 ， 因 为 现在 要 在 本 地 安装 Grunt， 
而 不 是 全 局 安装 ” 这 也 就 是 为 什么 要 创建 packagejson 文 件 的 原因 。 现 在 我 们 要 使 用 
--save-daev 修 饰 符 ， 指 明 这 是 个 开发 依赖 。 

我 们 要 执行 的 命令 是 :npm install --save-dev grunt。npm 安 装 完 这 个 包 后 , package.json 
文件 的 内 容 会 变 成 类 似 下 面 这 样 : 
{ 

"devDependencies": { 


Van TO 1 
} 


而 且 ，Grunt 模 块 会 安装 到 项 目的 node_modules 目 录 里 。Grunt 用 到 的 所 有 模块 都 会 安装 在 这 
个 目录 中 ， 而 且 都 会 在 包 清 单 文件 中 列 出 来 。 

2. 创建 Gruntfile.js 文 件 

最 后 一 步 是 创建 Gruntfile.js 文 件 。Grunt 使 用 这 个 文件 加 载 可 用 的 任务 , 并 使 用 所 需 的 参数 配 
置 任务 。 下 述 代码 是 最 简单 的 Gruntfile.js 模 块 : 


modqule .exports = function (grunt) { 
Grunt .registerTask('default', []); 










































































// 注册 default 任 务 别名 

六 

这 个 文件 看 似 平常 ， 但 有 几 点 要 注意 。Gruntfilejs 文 件 是 符合 CommonJS 模 块 规范 ?的 Node 
模块 ， 因 此 在 其 他 文件 中 无 法 立即 访问 这 个 文件 中 的 代码 。 这 个 文件 中 的 module 是 个 隐 式 对 象 ， 
不 像 浏览 器 中 的 window， 是 个 全 局 对 象 。 导 入 其 他 模块 时 ， 得 到 的 只 是 module.exports 提 供 的 公 
开 接 口 。 


Node.js 模 块 
Nodejs 模 块 采用 的 规范 CommonJS , 在 附录 A 中 有 进一步 介绍 。 第 5 章 说 明 模 块 化 时 还 会 讨 
论 CommonJS。 附 录 B 是 对 附录 A 的 扩充 ， 能 增强 你 对 Grunt 的 理解 。 

















Q@ Grunt 包 和 任务 插件 都 要 求 在 本 地 安装 Grunt， 这 样 代码 才能 在 不 同 的 设备 中 正常 运行 ， 因 为 在 package.json 文 件 中 
无 法 包含 全 局 安装 的 包 。 
@ 请 访问 http://bevacqua.io/bf/commonjs 阅 读 CommonJS 模 块 规范 。 
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上 述 代 码 片 段 中 grunt .registerTask 那 行 告诉 Grunt 定 义 一 个 默认 任务 ， 在 命令 行 中 执行 
grunt 且 不 带 任何 参数 时 执行 的 就 是 这 个 任务 。 数 组 表明 这 是 个 任务 别名 ， 只 要 数组 中 有 任务 ， 
就 会 执行 其 中 所 有 的 任务 。 例 如 ， 设 为 [' Lint'，'buila'] 时 会 执行 lint 任 务 和 build 任 务 。 

现在 执行 grunt 命 令 没 有 任何 作用 ， 因 为 我 们 注册 的 别名 是 空 的 。 你 肯定 迫切 地 想 设 置 第 一 
个 Grunt 任 务 ， 那 就 来 设置 吧 。 



































2.1.2 ”设置 第 一 个 Grunt 任 务 


设置 Grunt 任 务 的 第 一 步 是 安装 能 满足 需求 的 插件 ， 然 后 添加 配置 ， 最 后 再 运行 任务 。 

Grunt 插 件 一 般 以 npm 模 块 的 形式 分 发 ， 这 些 模块 是 别人 发 布 的 JavaScript 代 码 ， 你 可 以 直接 
使 用 。 我 们 要 先 安装 Grunt 的 JSHint 插 件 ， 安 装 了 这 个 插件 后 就 能 使 用 Grunt 运 行 JSHint 了 。 注 意 ， 
这 里 完全 不 需要 第 1 章 安装 的 CLI 工 具 jshint ， 因 为 Grunt 持 件 包含 运行 JSHint 所 需 的 一 切 ， 它 会 
自动 安装 jshint CLI。 下 述 命令 会 从 npm 源 获取 JSHint 搬 件 ， 安 装 到 node modules 目 录 中 ， 然 后 
再 把 这 个 插件 添加 到 package.json 文 件 中 ， 作 为 一 个 开发 依赖 : 


npm install --save-dev grunt-contrib-jshint 


接 下 来 我 们 要 修改 Gruntfile 文 件 , 让 Grunt 使 用 lint 程 序 检查 这 个 文件 , 因为 它 也 是 个 JavaScript 
文件 。 你 要 告诉 Grunt， 让 它 加 载 包 含 检 查 任务 的 JSHint 持 件 包 ,还 要 更 新 default 任 务 , 这 样 在 
命令 行 中 只 执行 grunt 就 能 检查 代码 了 。 配 置 Gruntfile,js 文 件 的 方式 如 下 述 代码 清单 所 示 (在 代 
码 示 例 的 ch02/01_intro-to-grunt 文 件 夹 里 )。 






























































代码 清单 2.1 ”Gruntfile.js 文 件 示 例 


导出 的 函数 有 个 
modqule .exports = function (grunt) { 4/ 名 为 grunt 的 参 
grunt.initConfig({ a < 
jshint: ['Gruntfile.js'] TOS 全 务 在 后 丰 contag72 法 中 下 得， 伟 
}); 入 的 是 一 个 描述 配置 信息 的 对 象 。 
t.loadNpmTasks ('grunt-contrib-jshint'); 
插件 要 分 别 /* 3 A 
载 入 groant. grunt .registerTask('default', ['jshint']); 个 、 注册 aefault 别 名 ， 


训 执行 jshint 任 务 。 
安装 插件 包 后 都 要 在 Gruntfile.js 文 件 中 使 用 grunt .1oadNpmTasks 将 其 载 人 Grunt， 如 代码 
清单 2.1 所 示 。Grunt 要 从 包 中 加 载 任务 ， 这 样 才 能 配置 和 执行 任务 。 随 后 你 要 配置 任务 ,方法 是 
把 一 个 对 象 传 给 grunt .initconfig 方 法 。 每 个 任务 插件 都 要 配置 , 介绍 各 个 插件 时 我 都 会 告诉 
你 怎么 配置 。 最 后 ， 我 还 更 新 了 default 别 名 ， 让 它 执行 jshint 任 务 。default 别 名 用 于 定义 
没有 任何 参数 的 grunt 命 令 执行 哪些 任务 。 执 行 grunt 命 令 得 到 的 输出 如 下 面 的 截图 所 示 。 
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@ NN nico@commandCenter: ~/dev/buildfirst/ch02/01 i... w” 
| -ntro-to-grunt (zsh) 1 | yy 


» grunt 
Running "jshint:@" (jshint) task 
>> 1 file lint free， 





Done, without errors. 


图 2-3 ”我 们 的 第 一 个 Grunt 任 务 及 其 输出 。 我 们 的 代码 通过 了 检查 ， 








也 就 是 说 没有 句法 错误 。 


2.1.3 ”使 用 Grunt 管 理 构建 过 程 


现在 我 们 实现 的 功能 几乎 和 第 1 章 结束 时 的 一 样 , 也 就 是 能 使 用 JSHint 检 查 JavaScript 代 码 了 ， 
不 过 这 次 有 所 不 同 。Grunt 能 帮 我 们 制定 一 个 成 熟 的 构建 过 程 ， 这 对 构建 优先 原则 至 关 重要 。 省 
下 的 精力 能 让 我 们 专注 于 为 本 地 开发 环境 中 的 构建 、 诊 断 或 构建 用 户 最 终 要 使 用 的 产品 这 个 过 程 
编写 不 同 的 任务 。 我 们 来 看 看 构建 任务 的 几 个 特性 。 

前 面 设置 的 lint 任 务 是 个 基础 。 在 阅读 本 书 第 一 部 分 的 过 程 中 ， 你 的 理解 会 越 来 越 深 有 了 
这 个 基础 就 能 写 出 更 强大 的 构建 任务 。 这 个 任务 清楚 地 表明 了 构建 任务 的 一 个 基本 特性 : 绝 大 多 
数 情 况 下 ， 任 务 都 是 舌 等 的 ， 即 重复 执行 任务 不 会 得 到 不 同 的 结果 。 对 这 个 lint 任 务 来 说 ， 这 可 
能 意味 着 ， 只 要 不 修改 源码 ， 每 次 执行 都 能 得 到 相同 的 提醒 。 通 党 ,构建 任务 都 会 操作 一 个 或 多 
个 输入 文件 。 有 了 窜 等 特性 ， 加 之 我 们 不 再 手动 执行 任何 操作 了 ， 这 样 得 到 的 结果 会 更 加 一 致 。 

1. 创建 工作 流程 和 持续 开发 

构建 过 程 中 的 任务 要 按照 明确 定义 的 顺序 执行 才能 实现 特定 的 目标 ， 例 如 准备 一 个 发 布 版 
本 。 我 们 在 第 1 章 提 到 过 ， 这 叫 工作 流程 。 某 些 任务 在 具体 的 工作 流程 中 是 可 有 可 无 的 ， 有 些 则 
可 能 会 提供 一 些 帮 助 。 例 如 ,在 本 地 开发 环境 中 没 必 要 优化 图 像 ， 把 图 像 变 得 更 小 ， 因 为 这 么 做 
不 能 显著 提升 性 能 ， 所 以 最 好 跳 过 这 个 任务 。 但 不 管 在 开发 流程 还 是 发 布 流程 中 ,你 或 许 都 想 执 
行 lint 任 务 ， 以 确保 代码 没 问 题 。 
图 2-4 能 帮助 你 理解 构建 过 程 中 涉及 的 开发 、 发 布 和 部 署 方面 的 任务 。 图 中 展示 了 各 个 任务 
之 间 的 关系 ， 以 及 如 何 把 任务 组 合 起 来 ， 构 成 不 同 的 工作 流程 。 

2. 开发 流程 
看 一 眼 这 幅 图 最 上 面 一 行 的 内 容 就 能 发 现 , 效率 和 监视 变动 是 开发 流程 的 重点 , 而 在 发 布 流 
程 中 则 毫 不 重要 ， 甚 至 还 可 能 成 为 干扰 。 你 可 能 还 会 注意 到 ， 这 两 个 流程 都 构建 出 了 应 用 , 不 过 
开发 流程 得 到 的 应 用 是 针对 持续 开发 的 ， 我 们 在 第 3 章 会 详 述 这 一 点 。 

3. 发 布 流程 

在 发 布 流程 中 , 我 们 关注 的 是 性 能 优化 ,以 及 构建 整体 测试 良好 的 应 用 。 和 开发 流程 稍 有 不 
同 ， 这 个 流程 执行 的 任务 重视 的 是 减少 应 用 占用 的 字 节 量 。 

4. 部 署 流程 

部 署 流程 完全 不 构建 应 用 , 而 是 直接 使 用 前 两 个 流程 准备 好 的 构建 版 本 , 将 其 传 到 主机 环境 
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中 。 第 4 章 会 详细 说 明 部 署 流程 








开发 流程 发 布 流程 
效率 方面 性 能 方面 





完整 构建 








元 测试 





任务 
打包 大 量 测试 














执行 特定 的 
任务 ， 然 后 
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等 待 文件 
变化 

性 能 调 优 过 ， 而 
且 测 试 良 好 ， 可 
以 部 署 了 

















部 署 流程 
可 靠 性 方面 




















要 部 团 的 环境 @B> 
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构建 得 到 
的 应 用 


目标 环境 

















在 开发 或 发 布 流程 中 构建 








(过 渡 环 境 、 生 成 环境 等 ) 














图 2-4 ”构建 和 部 署 流 程 中 关注 的 














EE 点 有 所 不 同 
任何 合理 的 构建 流程 都 要 自动 执行 其 中 的 每 一 步 , 否则 就 无 法 提升 效率 、 减 少 出 错 的 可 能 性 。 
开发 时 ， 我 们 在 文本 编辑 器 和 浏览 器 之 间 来 回 切换 ， 不 用 自己 执行 构建 过 程 。 这 叫 作 持续 开发 


因为 这 不 需要 打开 shell， 输 入 命令 编译 应 用 。 第 3 章 会 


























你 如 何 使 用 文件 监视 功能 和 其 他 机 制 实 
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现 持续 开发 。 部 署 应 用 的 过 程 应 该 和 构建 流程 分 开 ， 但 也 要 自动 化 ， 一 步 就 能 构建 并 部 署 应 用 。 
类 似 地 ， 何 服 应 用 这 一 步 也 应 该 严格 和 构建 过 程 分 开 。 

下 一 节 我 们 会 详细 说 明 如 何 使 用 Grunt 执 行 构建 任务 。 具 体 而 言 ， 我 们 会 先 从 预 处 理 任务 开 
始 , 例如 把 LESS 文 件 编译 成 CSS 文 件 , 然后 再 介绍 后 处 理 任务 , 例如 打包 和 简化 ， 以 帮 你 优化 和 


2.2 ” 预 处 理 和 静态 资源 优化 


谈 到 开发 Web 应 用 ， 不 可 避免 地 要 讨论 预 处 理 。 我 们 通常 会 使 用 浏览 器 原生 不 支持 的 语言 ， 
因为 这 些 语言 提供 了 CSS (例如 厂商 前 级 )、HTML 或 JavaScript 原 本 不 支持 的 功能 ， 能 避免 重复 
性 的 工作 。 

本 节 的 重点 不 是 教 你 LESS (一 个 CSS 预 处 理 絮 ， 下 一 节 会 介绍 ) 或 CSS， 因 为 这 两 门 语 言 
很 多 专门 的 教程 。 本 节 的 重点 是 让 你 了 解 使 用 预 处 理 语言 的 巨大 好 处 。 预 处 理 和 CSS 无 关 。 预 处 
理 器 能 把 使 用 一 门 语言 编写 的 代码 转换 成 多 种 目标 语言 。 例 如 ， 强 大 且 富 有 表现 力 的 LESS 语 言 
在 构建 时 能 转换 成 纯正 的 CSS。 不 同人 使 用 预 处 理 器 的 目的 各 异 ， 但 基本 上 可 分 这 么 几 类 : 为 了 
提升 效率 、 减 少 重复 或 使 用 更 舒适 的 句法 。 

后 处 理 任务 , 例如 简化 和 打包 ,基本 上 是 为 了 优化 发 布 版 本 , 但 这 些 任务 和 预 处 理 任务 联系 
紧密 ， 所 以 这 一 节 也 会 介绍 到 它 。 我 们 首先 介绍 使 用 LESS 做 预 处 理 ， 然 后 介绍 Grunt 用 来 匹配 文 
件 路 径 的 通 配 模 式 ， 最 后 介绍 打包 和 简化 ， 它 们 能 优化 应 用 的 性 能 ， 供 用 户 使 用 。 

读 完 本 节 之 后 , 你 会 更 加 理解 如 何 使 用 更 合适 的 语言 预 处 理 静 态 资源 ,以 及 如 何 对 静态 资源 
作 后 处 理 ， 以 提升 性 能 ， 增 强 用 户 体 验 。 

















































































































2.2.1 详 述 预 处 理 


现今 ,在 Web 开 发 中 使 用 语言 预 处 理 器 是 相当 普遍 的 现象 。 除 非 过 去 十 年 你 隐居 了 ， 否 则 你 
应 该 知道 预 处 理 器 能 帮助 我 们 编写 更 简洁 的 代码 ， 就 像 第 1 章 介绍 的 lint 程 序 一 样 。 不 过 我 们 要 多 
做 些 事情 才能 让 预 处 理 需 发 挥 作 用 。 说 白 了 ,如果 使 用 能 转换 成 其 他 语言 的 语言 编写 代码 ， 要 增 
加 预 处 理 这 一 步 ， 它 用 来 转换 代码 。 

你 不 想 使 用 目标 语言 编写 代码 可 能 有 这 几 个 原因 : 目标 语言 太 喝 腔 、 太 容易 出 错 , 或 者 你 就 
是 不 喜欢 那 门 语言 。 此 时 ， 这 些 高 级 语言 就 发 挥 作用 了 ,它们 能 让 代码 简洁 明了 。 不 过 使 用 这 些 
高 级 语言 编写 代码 也 要 付出 代价 : 浏览 器 不 理解 这 些 语言 。 因 此 , 在 前 端 开发 中 最 常见 的 任务 之 
一 就 是 把 使 用 高 级 语言 编写 的 代码 编译 成 浏览 器 能 理解 的 代码 ， 即 JavaScript 和 CSS 样 式 。 

有 时 预 处 理 器 还 能 提供 Web 的 原生 语言 (HTML、CSS 和 JavaScript ) 没有 的 实用 功能 。 例如， 
有 些 CSS 预 处 理 器 提供 了 必要 的 工具 ， 我们 不 必 再 为 每 种 浏览 器 编写 专用 的 样式 。 预 处 理 语言 能 
消除 浏览 器 之 间 的 差异 ， 提 高 我 们 的 效率 ， 让 工作 变 得 更 有 趣 。 

1. LESS: 简约 而 不 简单 

下 面 以 LESS 为 例 介绍 预 处 理 器 。LESS 是 一 门 强大 的 语言 ， 是 CSS 的 一 个 变种 。 它 是 遵从 应 
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用 设计 的 DRY ( Don't Repeat Yourself， 不 要 自我 重复 ) 原则 而 设计 ， 写 出 的 代码 重复 性 较 少 。 使 
用 纯粹 的 CSS 往 往 要 不 断 自我 重复 ,为 所 有 的 厂商 前 级 指定 相同 的 值 ， 尽 量 让 应 用 的 样式 支持 更 
多 的 浏览 

我 们 以 CSS 属 性 pordaer-raaqius 为 例 来 说 明 这 个 问题 。 这 个 属性 的 作用 是 为 元 素 加 上 圆 角 
样式 ， 使 用 纯粹 的 CSS 要 像 下 述 代 码 清 单 这 样 编写 样式 。 
代码 清单 2.2 ”使 用 纯粹 的 CSS 实 现 圆 角 样式 


.Slightly-rounded { 























"WEL Drs toads 2px; ava 需要 使 用 “厂商 前 缀 ”才能 让 
人 某 些 浏览 器 应 用 特定 的 样式 。 
border-radius: 2px; 2 

background-clip: padding-box; 站 

} 避免 背景 溢出 圆 角 。 


.Vvery-roundedqd { 
-webkit-border-radius: 16px; 





-moz-border-radius: 16px; 多 次 实现 圆 角 样式 
border-radius: 16px; 时 问题 更 严重 。 


background-clip: padding-box; 
} 


这 种 样式 如 果 只 编写 一 次 还 行 , 但 对 border-radius 这 样 经 常 使 用 的 属性 来 说 , 使 用 纯粹 的 
CSS 很 快 就 会 让 人 无 法 忍受 。 但 使 用 LESS 编 写 就 会 变 得 更 容易 ， 而 且 代 码 也 易于 阅读 和 维护 。 针 
对 这 种 情况 , 我 们 可 以 编写 一 个 能 重用 的 .border-radius 函 数 , 把 代码 改 成 下 述 代码 清单 这 样 。 









































代码 清单 2.3 ”使 用 LESS 实 现 圆 角 样式 


.border-radius (@value) { 这 是 可 重用 的 函 在 LESS 
-webkit-border-radius: @value; SR ee 
=] 了 7| 各 


-moz-border-radius: @value; 
border-radius: @value; 
background-clip: padding-box; 
} 

.Slightly-rounded { 


.border-radius (2px); “<\_ 使 用 这 个 函数 传 入 
} 半径 大 小 。 
.very-roundeqd { 

‘hore Faotus ep “\_ 再 次 使 用 这 个 函数 ， 多 次 设 
} 定 border-radius 属 性 。 





LESS 及 类 似 的 工具 就 是 通过 让 你 重用 CSS 代 码 片段 的 方式 来 提升 效率 。 

2. LESS 能 让 你 事半功倍 

需要 在 多 处 使 用 porder-radius 属 性 时 , 你 便 会 发 现 不 要 什么 都 写 两 次 ( Writing Everything 
Twice, 简称 WET ) 的 好 处 。 遵 守 DRY 原 则 ,每 次 需要 实现 圆 角 样式 时 就 不 用 列 出 所 有 四 个 属性 ， 
只 需 重 用 .border-radius 这 个 LESS 混 入 即 可 。 

预 处 理 在 精益 开发 流程 中 扮演 着 重要 的 角色 : 要 使 用 这 个 规则 时 不 用 每 次 都 编写 所 有 厂商 前 
级 ， 而 且 在 一 处 就 能 修改 所 有 前 级 ， 让 代码 更 易于 维护 。LESS 能 做 的 不 止 这 些 ， 它 还 能 把 静态 
规则 和 设 定 这 些 规则 的 值 清 楚 地 分 开 。 在 CSS 样 式 表 中 经 常 能 看 到 类 似 下 面 的 代码 : 
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a ll 
background-color: #FFC; 
} 
blockquote { 
background-color: #333; 
Color: #FFC; 
} 
LESS 人 允许 我 们 使 用 变量 ， 这 样 就 不 用 到 处 复制 粘贴 颜色 代码 了 。 为 变量 起 个 恰当 的 名 称 ， 
在 浏览 样式 表 时 就 能 轻易 识别 使 用 的 是 什么 颜色 。 
3. 使 用 LESS 变 量 
使 用 LESS 可 以 把 颜色 赋值 给 变量 ， 避 和 免 潜 在 的 问题 ， 例 如 在 一 个 地 方 修改 了 颜色 ,但 忘 了 
修改 使 用 这 个 颜色 的 其 他 地 方 。 使 用 变量 还 能 把 颜色 和 设计 中 的 其 他 可 变 参 数 统一 放 在 一 个 地 
方 。 下 述 代 码 展示 了 如 何 使 用 LESS 变 量 : 


| #FFC; Rs 声明 变量 有 助 于 定位 和 替换 
和 颜色 ， 还 能 避免 出 现 问题 。 


background-color: @yellowish; 





























} 
blockaquote { 直接 引用 变量 就 能 
background-color: #333; 使 用 了 。 

color: @yellowish; 


} 

就 像 我 在 2.2 节 开头 提 到 的 一 样 ， 这 样 做 能 让 代码 遵守 DRY 原 则 。 在 这 里 使 用 DRY 原 则 特别 
有 用 ， 因 为 这 样 一 来 ,我 们 就 不 用 复制 粘贴 颜色 代码 了 ， 因 此 能 避免 输入 错误 导致 的 问题 。 除 此 
之 外 ，LESS 等 语言 还 提供 了 生成 其 他 颜色 的 函数 ， 例 如 生成 更 深 的 绿色 或 更 透明 的 白色 等 有 趣 
的 颜色 算法 。 

现在 我 们 转变 一 下 话题 ， 介 绍 如 何 使 用 Grunt 任 务 把 LESS 代 码 编译 成 CSS 。 



































2.2.2 ”处 理 LESS 


本 章 前 面 说 过 ，Grunt 任 务 由 两 个 不 同 的 部 分 组 成 一 一 任务 和 配置 : 
口 任务 是 最 重要 的 ， 这 是 运行 构建 时 Grunt 要 执行 的 代码 ， 一 般 都 能 找到 符合 需求 的 插件 ; 
口 配置 是 传 给 grunt .initconfig 方 法 的 对 象 ， 几 乎 所 有 Grunt 任 务 都 需要 配置 。 

在 阅读 本 章 剩 余 内 容 的 过 程 中 ， 你 会 看 到 如 何 配置 各 个 任务 。 为 了 使 用 Grunt 把 LESS 文 件 编 
译 成 能 直接 伺服 的 CSS， 我 们 要 使 用 grunt-contrib-less 包 。 还 记得 怎么 安装 JSHint 搬 件 吗 ? 
这 个 包 的 安装 方法 与 之 相同 ， 只 不 过 是 包 名 变 了 ， 因 为 我 们 要 使 用 的 插件 变 了 。 在 终端 里 执行 下 


述 命令 安装 grunt-contrib-less 包 : 
















































































npm install grunt-contrib-less --save-deyv 


这 个 插件 提供 了 一 个 任务 ， 名 为 less， 在 Gruntfilejs 文 件 中 加 载 这 个 任务 的 方式 如 下 : 


grunt.loadNpmTasks ('grunt-contrib-less'); 


从 现在 开始 ， 为 了 行文 简洁 ， 我 会 省 略 各 个 示例 中 npm install 这 一 步 和 grunt .1oadNpnm 
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Tasks 这 部 分 代码 。 不 过 你 仍然 要 执行 hom install 获 取 包 ， 并 在 Gruntfile.js 文 件 中 加 载 插件 。 
任何 时 候 你 都 可 以 查看 本 书 的 配套 源码 ， 那 里 有 完整 的 代码 。 

设置 这 个 构建 任务 的 方法 很 简单 : 把 属性 名 指定 为 输出 文件 的 名 称 , 把 对 应 的 值 设 为 用 来 生 
成 CSS 文 件 的 源 文件 的 路 径 。 这 个 例子 在 本 书 配套 源码 的 ch02/02_less-task 文 件 夹 中 。 


grunt.initConfig(t{ 
less: { 
compile: { 
files: { 
'pbuild/css/compiled.css': 'public/css/layout.less' 
} 
} 
} 
上 


执行 任务 的 最 后 一 步 是 在 命令 行 中 调用 grunt。 在 本 例 中 ， 我 们 需要 在 终端 里 执行 gzunt 
less 命 令 。 我 们 通常 建议 你 明确 指定 目标 。 本 例 中 ,指定 目标 的 方式 是 grunt less:compile。 
如 果 不 指 定 目标 名 ， 所 有 目标 都 会 被 执行 。 





























Grunt 的 配置 方式 具有 一 致 性 

在 往 下 看 之 前 ， 我 要 提 一 个 在 使 用 Grunt 的 过 程 中 会 让 你 感到 舒服 的 细节 。 不 同 任务 之 间 
的 配置 方式 不 会 有 太 大 差异 ,尤其 是 那些 由 Grunt 团 队 开 发 的 任务 。 即 便 是 nom 中 的 任务 ,只 要 
有 配置 ,方式 也 差不多 。 在 阅读 本 章 的 过 程 中 你 会 发 现 , 我 介绍 的 各 个 任务 ,就算 提 供 了 大 量 
操作 方式 ， 其 配置 的 方式 也 都 类 似 。 





使 用 Grunt 执 行 构建 目标 less : compile， 会 把 lavout .less 文 件 编译 成 compiled.css 文 
件 。 输入 文件 不 仅 可 以 是 单个 文件 , 还 可 以 是 一 组 文件 。 此 时 ,得 到 的 是 一 个 打包 文件 ,包含 编 
译 所 有 LESS 输 入 文件 后 得 到 的 CSS。 我 们 稍 后 就 会 详细 介绍 打包 。 下 述 代码 清单 是 个 示例 。 


代码 清单 2.4 ”声明 一 组 输入 文件 
grunt.initConfig(t{ 
less: { 
compile: { 
files: { 
'build/css/compiled.css': | 
'public/css/layout.less', 
'public/css/components.less', 
'public/css/views/foo.less', 
'public/css/views/bar.less' 












































} 
} 
}); 


挨个 列 出 每 个 文件 不 是 不 可 以 , 但 是 如 果 有 上 百 个 文件 , 最 好 使 用 通 配 模式 。 下 面 就 介绍 这 
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个 模式 。 

精通 通 配 模式 

我 们 可 以 使 用 Grunt 提 供 的 通 配 功 能 ,进一步 改进 上 述 代码 中 的 配置 。 通 配 " 是 一 种 文件 路 径 
匹配 机 制 ， 可 以 帮 你 使 用 文件 路 径 模式 来 包含 或 排除 文件 。 这 个 模式 特别 有 用 ， 因 为 我 们 不 用 手 
动 列 出 静态 资源 文件 夹 中 的 所 有 文件 ， 这样 能 避免 一 些 常 见 的 错误 , 例如 ,忘记 把 新 样式 表 添 加 
到 列表 中 。 

如 果 想 让 构建 任务 排除 某 些 文件 , 例如 第 三 方 提供 的 文件 ， 也 用 得 到 通 配 模式 。 下 述 代码 展 
示 了 一 些 有 用 的 通 配 模式 : 

[ 


'public/*.less', 
'public/**/*.l]ess', 
'Ipublic/vendor/**/*.less' 


] 
关于 上 述 代 码 ， 有 以 下 几 点 需要 说 明 。 
口 第 一 个 模式 会 匹配 public 文 件 夹 中 扩展 名 为 .less 的 所 有 文件 。 
口 第 二 个 模式 和 第 一 个 模式 的 作用 差不多 , 不 过 因为 使 用 了 特殊 的 ** 模 式 ， 还 能 匹配 public 
文件 夹 的 子 文件 夹 中 的 文件 ， 而 旦 不 管 腻 套 层级 有 多 深 。 
口 你 可 能 猜 到 了 ， 最 后 一 个 模式 和 第 二 个 的 作用 一 样 ， 不 过 开头 的 ! 符 号 表明 ， 要 从 结果 中 
排除 匹配 的 文件 。 

通 配 模式 按照 其 出 现 的 顺序 解析 , 而 且 能 和 普通 的 文件 路 径 一 起 使 用 。 通 配 模式 得 到 的 结 
是 数组 ， 包 含 所 有 匹配 的 文件 路 径 。 

使 用 通 配 模式 可 以 稍微 重 构 一 下 前 面 less :compile 的 配置 ， 将 其 改 得 简单 一 些 : 

grunt .initConfig({ 

less: { 
compile: { 
files: { 
'build/css/compiled.css': 'public/css/**/*.less' 
} 
} 
} 

路 汉 

在 继续 讲解 之 前 ， 我 要 提醒 你 一 下 ， 在 这 个 示例 中 ，1less 是 构建 任务 ，compile 是 这 个 任 
务 的 构建 目标 ， 专 为 这 个 目标 提供 配置 。 为 less 任 务 提 供 其 他 目标 的 方式 很 简单 ， 在 less 对 象 
中 添加 其 他 属性 即 可 , 和 上 述 代码 中 传 给 initconfig 方 法 的 配置 中 的 compile 目 标 一 样 。 例如， 
你 可 以 添加 一 个 compile_mobile 目 标 ， 编 译 移动 设备 使 用 的 CSS 静 态 资 源 ; 还 可 以 添加 一 个 
compile_desktop 目 标 ,编译 桌面 浏览 器 使 用 的 静态 资源 。 

注意 ， 在 这 个 任务 中 使 用 通 配 模 式 指 定 要 编译 的 LESS 文 件 有 个 副作用 : 不 管 有 和 多少 LESS 文 
件 , 编译 得 到 的 CSS 都 会 被 打包 到 一 个 文件 中 。 那么 , 接 下 来 我 们 就 来 介绍 打包 静态 文件 的 任务 。 




































































































































































Q@ Grunt 网 站 很 好 地 说 明了 通 配 的 用 法 ,详情 请 访问 http://bevacqua.io/bf/globbing。 








图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


2.2 ” 预 处 理 和 静态 资源 优化 31 




















这 是 个 后 处 理 任务 ， 能 减少 HTTP 请 求 数量 ， 提 升 网 站 的 性 能 。 
2.2.3 打包 静态 资源 

前 面 我 提 到 了 打包 的 作用 , 在 阅读 本 书 之 前 你 可 能 也 听 说 过 打包 。 没 听 说 过 也 没关系 ， 这 个 
概念 不 难 理解 。 

打包 就 是 在 你 把 应 用 交 给 客户 之 前 把 所 有 静态 资源 都 放 在 一 起 。 没 打包 的 应 用 好 比 去 杂货 
买 东西 ， 一 次 只 买 一 个 , 买 了 就 回 家 ， 然 后 再 去 商店 ， 买 购物 清单 中 的 另 一 个 东西 ; 而 打包 后 的 
应 用 好 比 只 去 一 次 杂货 店 ， 买 完 所 有 需要 的 东西 。 

在 一 次 HTTP 响 应 中 处理 所 有 事务 能 降低 网 络 消耗 ， 这 么 做 对 所 有 人 都 有 好 人 处。 传输 的 数据 可 
能 变 多 了 , 但 客户 端 能 省 去 很 多 对 服务 右 不 必要 的 网 络 请 求 。 要 知道 , 每 次 请 求 都 会 受到 网 络 相 关 
问题 的 影响 而 耗 时 ， 例 如 延迟 、TCP 和 TLS 信 号 交换 等 。 如 果 你 想 深入 学 习 底 层 的 网 络 协 议 ， 我 强 
烈 推荐 你 阅读 Ilya Grigorik 写 的 High Performance Browser Networking 一 书 ( O’Reilly Media，2013 )。 

确切 地 说 , 打包 就 是 把 各 个 文件 的 内 容 添加 到 前 一 个 文件 的 末尾 。 使 用 这 种 方式 ,可 以 把 所 
有 CSS 或 所 有 JavaScript 都 打包 到 一 起 。HTTP 请 求 的 数量 变 少 后 ， 性 能 会 得 到 提升 ， 因 此 在 构建 
过 程 中 有 必要 加 上 打包 静态 资源 这 一 步 。 图 2-5 展 示 了 打包 前 后 用 户 和 网 站 之 间 的 交互 ， 以 及 各 
自 对 网 络 连接 的 影响 。 
打包 前 
请 求 数 多 ， 用 户 和 服务 器 
之 间 的 HTTP 事 务 就 多 。 







































































网 页 31 个 HTTP 请 求 





9 个 样式 表 





人 ) 商 网 站 发 起 HTTP 请 求 | ”22 个 脚本 ， 
~ 








f= 


用 户 

















http://bevacqua.io 


打包 后 

请 求 数 少 了 ， 用 户 使 
Web 浏 览 器 的 体验 就 变 
好 了 。 
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网 页 






人 ) 向 网 站 发 起 HTTP 请 求 | 一 个 打包 好 的 | 2 个 HTTP 请 求 
脚本 ， 一 个 打 上 
包 好 的 样式 




















打包 和 拼接 这 两 个 术语 http://bevacqua.io 
可 以 互 换 使 用 。 














图 2-5 打包 静态 资源 ， 减 少 HTTP 请 求 数 
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从 这 幅 图 可 以 看 出 ， 打 包 前 浏览 器 要 发 起 很 多 HTTP 请 求 获取 网 站 的 资源 ， 而 打包 后 ， 每 个 
打包 好 的 资源 ( 包含 应 用 所 需 的 多 个 不 同文 件 ) 只 需要 一 个 请 求 就 行 了 。 

很 多 预 处理 吉 都 提供 了 把 静态 资源 打包 到 一 个 文件 中 的 选项 , 前 面 演示 less :compile 任 务 
时 我 们 就 体验 过 了 。 

打包 

使 用 grunt -contrib-concat 包 很 容易 就 能 设置 构建 目 标 通过 前 面 介绍 的 通 配 模 式 把 任 
意 多 个 文件 拼接 到 一 起 。 我 们 对 这 种 打包 方式 可 能 已 经 很 熟悉 了 。 在 本 书 中 ,拼接 和 打包 这 两 个 
术语 表示 同一 个 意思 。 下 述 代码 清单 〈 在 本 书 配套 源码 的 ch02/03_bundle-task 文 件 夹 中 ) 说 明了 
如 何 配置 concat 任 务 。 


代码 清单 2.5 配置 拼接 任务 

















grunt.initConfig({ concat 属 性 表明 我 们 配 
concat: { 本 人 置 的 是 concat 任 务 。 
concat 对 象 内 部 的 1 J { #B 
各 属性 是 用 来 配置 files: { i 
各 个 任务 目标 的 。 'build/js/bundle.js': 'public/js/**/*.js' 要 拼接 的 文件 使 用 通 配 





模式 public/js/*/*.js 获 
取 ， 拼 接 的 结果 写 入 
build/js/bundle.js 文 件 。 


} 
} 
} 
es 
显然 ，concat :js 任务 会 读 取 public/js 文 件 夹 ( 及 任意 层级 的 子 文件 夹 ) 中 的 所 有 JavaScript 
文件 , 打包 后 写 人 build/js/bundle.js 文 件 。 在 任务 之 间 切 换 就 是 如 此 自然 , 有 了 时候 容易 得 难以 置信 。 
在 构建 过 程 中 人 处理 静态 资源 时 还 要 做 一 件 事 一 一 简化 。 下 面 就 来 讨论 这 个 话题 。 
































2.2.4 简化 静态 资源 


简化 和 拼接 类 似 , 其 目的 都 是 为 了 尽量 减轻 网 络 连接 的 负担 ,不 过 简化 采用 的 方式 有 所 不 同 。 
简化 不 会 把 多 个 文件 的 内 容 放 在 一 起 ， 而 是 会 删除 空白 、 缩 短 变量 名 ， 以 及 优化 代码 的 句法 树 。 
简化 后 的 文件 , 代码 的 作用 和 你 编写 的 代码 一 样 , 文件 的 大 小 也 明显 变 小 了 , 但 要 付出 代价 ， 即 
简化 后 的 代码 几乎 没有 可 读 性 。 缩 减 文件 大 小 能 提升 性 能 ， 如 图 2-6 所 示 。 

从 图 中 可 以 看 出 ,静态 资 源 简化 后 占用 空间 更 小 ， 因 此 下 载 速度 更 快 。 较 之 在 服务 右 端 作 
GZip 压 缩 "， 简 化 静态 资源 的 效果 更 明显 。 

简化 会 把 代码 弄 乱 的 这 个 副作用 可 能 会 让 你 觉得 “有 了 安全 保障 ”， 从 而 把 所 有 信息 都 放 在 
JavaScript 代 码 中 ， 因 为 简化 后 的 代码 难以 阅读 。 可 是 ,不管 你 把 客户 端 代码 搅 得 多 乱 , 别人 只 要 
下 一 番 功 夫 , 还 是 能 弄 清 楚 你 在 代码 中 做 了 什么 。 所 以 ， 绝 不 要 信任 客户 端 , 一 定 要 把 包含 敏感 
言 息 的 代码 放 在 后 端 。 

静态 资源 既 可 以 打包 ， 也 可 以 简化 ， 因 为 这 两 个 操作 是 正 交 的 ( 即 彼此 之 间 没 有 影响 )。 打 
包 是 把 多 个 文件 的 内 容 放 到 一 起 , 而 简化 是 为 了 减少 各 个 文件 的 占用 空间 。 这 两 种 操作 在 功能 




























































































G 关于 如 何在 你 使 用 的 后 端 服务 器 中 启用 GZip 压 缩 ， 请 访问 http:/bevacqua.io/bfygzip。 
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并 不 重大 因此 可 以 共存 。 











简化 前 
未 简化 的 代码 导致 HTTP 请 求 








更 大 ， 响 应 时 间 更 长 。 两 个 较 大 的 响应 ， 
静态 资源 总 计 748kB 








网 页 





站 发 起 HTTP 请 求 | ”脚本 520kB， | 2 个 HTTP 请 求 态 资源 
(向 网 站 发 起 HTTP 请 来 亿 杰 3eok8 | 2 个 HTTP 请 求 ,|| 静态 资 尖 
“Wr kk 


http://bevacqua.io 



























































简化 后 
简化 代码 后 响应 更 快 ， 用 
户 更 满意 。 





两 个 较 小 的 响应 ， 
网 页 静态 资源 总 计 214kB 


2 个 HTTP 请 求 
CD 向 网 站 发 起 HTTP 请 求 人 9 广东 
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http://bevacqua.io 








图 2-6 ”简化 静态 资源 ， 减 小 HTTP 响 应 的 长 度 








打包 和 简化 这 两 个 步 又 的 顺序 不 限 ， 不 管 谁 先 谁 后 ， 得 到 的 结果 基本 是 一 样 的 : 单个 的 压缩 
文件 ,最 适合 发 布 ， 对 开发 基本 没 用 。 虽 然 简化 和 打包 对 面向 用 户 的 应 用 特别 重要 ， 但 在 追求 持 
续 开发 的 日 常 开发 流程 中 却 会 影响 效率 ,因为 这 两 个 操作 让 调试 变 难 了 。 所 以 在 构建 过 程 中 一 定 
要 把 这 两 个 任务 和 其 他 任务 清楚 地 分 开 ， 只 在 合适 的 环境 中 执行 ， 以 免 影响 开发 效率 。 

一 个 简化 静态 资源 的 示例 

我 们 来 看 一 个 简化 静态 资源 的 示例 ( 在 本 书 配套 源码 的 ch02/04_minify-task 文 件 夹 中 )， 它 能 
生成 提供 给 最 终 用 户 使 用 的 静态 资源 。 在 这 个 示例 中 我 们 使 用 grunt -contrib-uglify 包 简化 
JavaScript 文 件 ， 这 个 包 有 很 多 选项 可 以 设置 。 先 从 npm 安 装 这 个 包 ， 然 后 载 和 这 个 插件 ， 再 像 下 
列 代码 清单 这 样 设置 。 
代码 清单 2.6 配置 简化 静态 资源 的 任务 





























grunt.initConfig({ 


uglify 属 性 表明 我 ee 这 uglify 对 象 内 部 的 各 属性 是 
们 配置 的 是 uglify pt 4/ 用 来 配置 各 个 任务 目标 的 。 
任务 。 files: { ma 上 
'build/js/cobra.min.js': 'public/js/cobra.js' 要 简化 的 文件 是 
} public/js/cobra.js， 
} 结果 写 入 build/js/ 
) cobra.min.js 文 件 。 
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这 样 设置 之 后 ， 执 行 grunt uglify :cobra 命 令 会 简化 cobra.js 文 件 。 如 果 想 简化 前 一 步 打 
包 好 的 文件 ， 进 一 步 提 升 应 用 的 性 能 ， 应 该 怎么 做 呢 ” 直 接 简化 代码 清单 2.5 中 拼接 的 文件 即 可 ， 
如 下 列 代码 清单 ( 在 本 书 配 套 源 码 的 ch02/05_bundle-then-minify 文 件 夹 中 ) 所 示 。 


代码 清单 2.7 打包 后 简化 静态 资源 








OE- Lr COOrE To 立 Pe 
uglify 属 性 表明 我 uglify: {#A ea 
们 配置 的 是 uglify bundle: { 总， | ss 要 简化 的 是 
任务 。 filess concat:js 
'build/js/bundle.min.js': 'build/js/bundle.js' Sy 任务 得 到 的 打 
} 包 文 件 ， 结 果 
} 写 入 build/js/ 
} bundle.min.js 
法 文件 。 


把 这 两 步 放 在 一 起 是 为 了 按 顺 序 执行 这 两 个 任务 。 为 此 ， 你 可 以 执行 grunt concat :js 
uglify :bundle 命 令 。 借 此 机 会 ， 我们 顺便 介绍 一 下 任务 别名 。 

任务 别名 由 一 组 任务 组 成 , 任务 的 数量 不 限 ,这 些 任 务 常常 在 一 起 执行 ,而 且 相 互 之 间 有 联 
系 。 别 名 中 的 任务 应 该 有 良好 的 相互 依赖 关系 ,这 样 才能 得 到 有 意义 的 输出 结果 ,更 容易 让 人 沿 
用 ， 也 更 有 语义 。 任 务 别名 在 定义 工作 流程 时 也 很 有 用 。 

在 Grunt 中 创建 任务 别名 很 容易 ， 只 需 一 行 代码 ， 如 下 所 示 。 创 建 别名 时 还 可 以 提供 描述 信 
息 ， 执 行 grunt --help 命 令 时 会 显示 这 个 信息 。 描 述 信息 对 浏览 代码 的 开发 者 最 有 用 ， 但 你 要 
说 明 为 什么 把 这 些 任 务 放 在 一 起 : 


grunt.registerTask('js', 'Concatenate and minify static JavaScript assets', 
'cConcat:js', "uglify:bundle']); 


现在 ，js 就 是 一 个 Grunt 任 务 了 。 执 行 grunt js 命令 后 即 会 拼接 ， 也 会 简化 JavaScript 文 件 。 

下 面 再 介绍 一 个 用 来 处 理 静 态 资源 的 任务 ， 在 构建 过 程 中 执行 这 个 任务 也 能 提升 应 用 的 性 
能 。 这 个 操作 的 目的 和 打包 一 样 ,不 过 它 处 理 的 是 图 像 ， 得 到 的 是 子 图 集 上 映射。 这 个 概念 出 现 的 
时 间 比 简化 和 拼接 都 早 很 多 。 


2.2.5 创建 子 图 集 


子 图 集 是 由 多 张 图 像 合 并 而 成 的 一 个 大 图 像 文件 有 了 子 图 集 , 我 们 不 再 引用 单个 图 像 文件 ， 
而 是 使 用 background-position、width 和 height 这 三 个 CSS 属 性 从 子 图 集中 选择 需要 的 图 
像 。 子 图 集 也 是 对 静态 资源 的 打包 ， 只 不 过 打包 的 是 图 像 。 

子 图 集 这 个 技术 最 早 是 很 多 年 前 在 游戏 开发 中 出 现 的 ,如 今 仍 在 使 用 。 游 戏 开 发 者 把 很 多 图 
形 塞 到 一 个 图 像 中 , 显著 提升 了 游戏 的 性 能 。 在 Web 领 域 , 图 标 和 各 种 小 图 像 最 适合 使 用 子 图 集 。 

自己 维护 子 图 集 表 单 和 对 应 的 CSS 很 麻烦 ， 尤 其 是 当 你 要 切 图 ， 还 要 合成 图 像 ， 让 图 标 和 子 
图 集 表 单 对 应 起 来 的 时 候 ， 这 个 过 程 十 分 繁琐 。 不 过 我 们 可 以 求助 万 能 的 Grunt， 让 它 扭 转 这 一 
局 面 。npm 中 有 一 些 现成 的 包 能 自动 生成 CSS 子 图 集 映射 。 在 这 个 示例 中 ,我 使 用 的 是 Grunt 插 件 
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grunt-spritesmith。 如 果 安 装 这 个 插件 时 遇 到 问题 , 请 查看 本 书 配 套 源码 中 的 示例 加 以 解决 。 
这 个 插件 的 配置 方式 对 我 们 来 说 已 经 不 陌生 了 : 


grunt.initConfig(t{ 
sprite: { 
icons: { 
src: 'public/img/icons/*.png', 
destImg: 'build/img/icons.png', 
destCSS: 'build/css/icons.css' 
} 
} 
} 


现在 ,我 们 可 以 放心 地 假定 src 属 性 的 值 可 以 是 任何 通 配 模式 。destImg 属 性 的 值 是 生成 的 子 
图 集 表单 文件 路 径 ，aestcSss 属 性 的 值 是 在 HTML 中 滨 染 子 图 集 表 单 时 各 子 图 的 CSS 文 件 。 有 了 这 
个 CSS 文 件 和 刚 生成 的 子 图 集 表 单 ， 如 果 想 在 网 站 中 加 上 图 标 ， 只 需 创 建 HTML 元 素 并 指定 不 同 子 
图 的 CSS 类 即 可 。 这 里 ，CSS 的 作用 是 “裁剪 " 子 图 集 表 单 的 不 同 部 分 ， 只 获取 图 标 对 应 的 那 部 分 。 






























































Web 的 感知 性 能 

我 作 须 强调 ,打包 静态 资源 、 简 化 甚至 子 图 集 在 发 布 版 本 中 至 关 重 要 。 现今, 图像 往 往 是 
Web 应 用 中 最 耗资 源 的 , 使 用 这 些 技术 能 减少 对 服务 器 的 请 求 数量 , 无 需 使 用 更 好 的 硬件 就 能 
提升 性 能 。 除 此 之 外 ,我 们 还 可 以 使 用 简化 和 压缩 技术 ， 减 小 响应 的 字 节 大 小 。 


1. 速度 至 关 重 要 

在 Web 中 ， 速度 是 基本 的 决定 性 因素 。 响 应 速度 ,或 者 至 少 是 可 感知 的 响应 速度 对 用 户 体验 
( User eXperience， 简 称 UX ) 有 重大 影响 。 现 在 ， 可 感知 的 响应 速度 是 最 重要 的 ， 即 使 实际 上 完 
成 请 求 要 花 更 多 的 时 间 也 没关系 。 只 要 能 立即 响应 用 户 的 操作 , 用 户 就 会 觉得 你 的 应 用 运行 速度 
很 快 。 我 们 平时 在 Facebook 和 Twitter 上 都 能 看 到 这 种 现象 ， 文 章 发 布 后 会 立即 出 现在 列表 中 ， 而 
和 实 上 ， 数 据 还 在 发 往 服 务 器 。 

无 数 的 实验 都 已 证 明 , 速度 对 于 快捷 和 可 靠 的 服务 来 说 是 多 么 重要 。 我 想到 了 和 谷歌 和 亚 马 逊 
分 别 做 的 两 个 实验 。 

玛丽 莎 . 梅 耶 尔 是 谷歌 公司 UX 部 门 的 副 总 裁 ，2006 年 ， 她 收 到 用 户 反 馈 ， 希望 每 页 显示 更 
多 的 搜索 结果 。 随 后 她 做 了 一 个 实验 ,把 每 页 的 搜索 结果 增加 到 30 个 。 在 这 个 实验 中 , 每 页 获得 
更 多 搜索 结果 的 实验 组 贡献 的 流量 和 收入 降低 了 20%。 

玛丽 莎 说 他 们 发 现 了 一 个 不 可 控 变 量 。 生 成 显示 10 个 搜索 结果 的 页 面 需 要 0.4 秒 ,而 生成 显示 30 
个 搜索 结果 的 页 面 要 0.9 秒 。 时 间 多 了 0.5 秒 ,流量 就 损失 了 20%。 只 多 了 0.5 秒 ， 用 户 就 不 满意 了 。” 
亚马逊 也 做 过 类 似 的 实验 , 他 们 在 分 离 式 组 间 测 试 中 故意 不 断 降低 网 站 的 响应 速度 。 结果 证 
明 ， 即 便 是 稍微 降低 一 点 速 速 ， 销 售 量 也 会 明显 下 降 。 
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Q@9 有 篇 文章 详细 说 明了 速度 问题 ， 地 址 是 http://bevacqua.io/bf/speed-matters。 
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2. 可 感知 的 响应 速度 和 实际 速度 

除了 实际 的 响应 速度 之 外 ,还 有 可 感知 的 速度 。 虽然 用 户 的 操作 要 花 几 秒 钟 处 理 , 不 过 我 们 
可 以 提供 实时 反馈 ， 提 升 可 感知 的 速度 。 用 户 都 喜欢 这 种 快速 的 响应 。 

至 此 , 我 们 已 经 讨论 了 在 网 络 中 访问 静态 资源 时 如 何 提 速 , 还 介绍 了 处 理 静 态 资源 的 相关 构 
建 任务 ,以 及 不 同方 式 和 技术 对 性 能 的 影响 。 现 在 我 们 要 谈 谈 代码 质量 了 。 在 此 之 前 , 我 们 只 是 
稍微 留意 了 一 下 代码 质量 ， 下 面 我 们 要 介绍 一 些 任务 , 提升 代码 的 质量 。 我们 已 经 很 好 地 理解 了 
什么 是 预 处 理 ， 什 么 是 后 处 理 ， 知 道 了 二 者 的 工作 方式 ， 以 及 如 何 执行 相关 的 操作 。 

第 1 章 在 构建 过 程 中 添加 lint 任 务 时 我 们 谈 到 了 代码 质量 。 如 果 想 保持 构建 的 过 等 性 ， 后 期 一 
定 要 做 些 清理 工作 。 类 似 地 ,为 了 让 代码 质量 保持 在 一 个 高 水 准 上 ,一定 要 使 用 lint 程 序 检 查 代 
码 ， 还 要 运行 测试 。 

下 面 ， 我 们 来 深入 讨论 这 个 问题 ， 弄 清楚 如 何 更 好 地 把 这 些 任务 集成 到 真实 的 构建 过 程 中 。 


2.3 ”检查 代码 完整 性 


关于 代码 完整 性 检查 ， 我 们 会 讨论 以 下 几 个 任务 。 

口 首先 ， 后 期 要 做 些 清理 工作 。 只 要 构建 ， 就 要 清理 构建 过 程 中 生成 的 中 间 产 物 。 这 样 才 

能 保证 需 等 性 ， 让 多 次 构建 得 到 相同 的 结果 。 

口 在 第 1 章 接近 末尾 的 基础 上 , 我 们 会 再 次 介绍 使 用 lint 程 序 检查 代码 , 每 次 构建 都 要 确保 代 

码 没有 句法 错误 。 

口 最 后 还 会 简要 介绍 如 何 设置 测试 运行 程序 ， 以 便 你 自动 执行 代码 的 测试 。 后 面 的 章节 还 
会 深入 讨论 这 个 话题 。 


2.3.1 清理 工作 目录 


一 般 情 况 下 , 完成 构建 后 工作 目录 会 变 得 很 乱 ， 因 为 在 构建 过 程 中 会 生成 一 些 不 属于 源码 的 
内 容 。 我 们 要 确保 构建 前 后 工作 目录 处 于 相同 的 状态 , 这 样 每 次 构建 才能 得 到 相同 的 结果 。 为 此 ， 
执行 其 他 任务 之 前 一 般 都 要 清理 生成 的 文件 。 

工作 目录 工作 目录 是 个 花 俏 用 语 ， 其 实 就 是 开发 过 程 中 代码 基 的 根 目录 。 通 常 ， 你 最 好 
在 一 个 子 目 录 中 放置 构建 过 程 中 编译 得 到 的 文件 , 例如 , 可 以 把 这 个 目录 命名 为 build。 这 么 做 能 
把 源码 和 构建 过 程 中 的 中 间 产 物 清 楚 地 区 分 开 。 

发 布 应 用 后 , 服务 器 会 使 用 构建 得 到 的 版 本 。 除非 再 次 发 布 , 否则 不 能 修改 此 次 构建 的 结果 。 
部 署 后 再 执行 构建 任务 就 像 手 动 执 行 这些 任 务 一 样 , 完全 没有 好 处 ,因为 这 样 会 再 次 引入 人 为 因 
素 。 一 般 来 说 ， 如 果 感 觉 有 瑕 琵 ， 那 就 可 能 说 明 清 理 得 不 够 ,需要 改进 清理 操作 。 
















































































































































































隔离 构建 的 结果 
讨论 代码 的 完整 性 时 , 我 觉得 有 必要 强调 一 个 问题 从 目前 我 所 展示 的 示例 中 你 可 能 已 经 
发 现 了 ,我 强烈 建议 把 构建 生成 的 内 容 和 源码 清楚 地 分 开 。 把 生成 的 内 容 放 在 build 目 录 中 即 可 。 
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这 么 做 有 几 个 好 处 : 方便 删除 生成 的 内 容 、 使 用 通 配 模式 能 轻易 忽略 这 个 文件 夹 、 在 一 个 地 方 
能 找到 生成 的 所 有 内 容 ， 以 及 确保 不 会 意外 删除 源码 这 或 许 是 最 大 的 好 处 。 











有 些 任务 虽然 会 生成 内 容 , 但 执行 时 如 果 能 删除 现存 的 构建 中 间 产 物 ， 就 能 保证 寡 等 性 : 不 
管 运行 多 少 次 ， 都 不 影响 任务 的 行为 ， 得 到 的 结果 始终 一 致 。 知 想 保证 构建 任务 的 寡 等 性 ， 就 要 
执行 清理 工作 ， 让 任务 始终 生成 相同 的 结果 。 那 么 ， 我 们 来 看 一 下 如 何在 Grunt 中 配置 执行 清理 2 
的 任务 。 我 们 要 使 用 grunt-contrib-clean 包 ， 这 个 插件 提供 了 一 个 clean 任 务 供 我 们 使 用 。 
这 个 任务 的 作用 正如 其 名 称 所 示 : 你 提供 目标 名 称 , 它 会 删除 通 配 模式 指定 的 文件 或 整个 文件 夹 。 
下 列 代码 是 一 个 示例 (在 本 书 配套 源码 的 ch02/07_clean-task 文 件 夹 中 ): 






































ee 删除 生成 的 内 容 有 时 很 简单 
二 
0 ”把 整个 目录 都 删除 即 可 。 


css: 'build/css', 


1655: “Puplic/**/*.CSS SN 如 果 源 文件 和 目标 文件 放 在 一 起 就 有 


点 难 ， 要 明确 指定 要 删除 的 文件 。 


前 两 个 属性 的 值 , pui1l9/js 和 bui1ld/css, 表明 了 找 出 生成 的 内 容 并 将 其 删除 是 多 么 容易 ， 
但 前 提 是 生成 的 内 容 要 清楚 地 和 源码 分 开 。 不 过 , 第 三 个 属性 的 值 表明 ， 如果 源 码 和 生成 的 内 容 
在 同一 个 目录 中 , 清理 起 来 就 不 那么 容易 。 除 此 之 外 , 如 果 把 生成 的 内 容 单独 放 在 一 个 文件 夹 中 ， 
还 能 在 版 本 控制 系统 中 轻易 排除 这 个 文件 夹 。 


2.3.2 ”使 用 lint 程 序 检 查 代 码 


前 一 章 我 们 已 经 说 了 使 用 lint 程 序 检 查 代码 的 好 处 ， 不 过 我 们 还 要 再 看 一 下 lint 任 务 的 配置 。 
记 住 , 这 里 我 们 使 用 的 是 gsrunt-contrib-jshint 包 。 这 个 捅 件 的 配置 方式 如 下 列 代 码 所 示 (在 
本 书 配套 源码 的 ch02/08_lint-task 文 件 夹 里 ): 

grunt.initConfig({ 

jshint: { 
client: [ 
"DUBLIG/JS/** /je 
'!lpublic/js/vendor' 
] 


} 
J 


注意 , 一 定 要 排除 第 三 方 (别人 写 的 ) 代码 。 就 像 不 用 单元 测试 第 三 方 代码 一 样 ， 也 不 用 检 
查 第 三 方 代码 。 如 果 你 没 把 生成 的 内 容 放 在 单独 的 文件 夹 中 , 那 你 还 要 把 这 些 生成 的 内 容 排除 在 
JSHint 检 查 的 范围 之 外 。 这 又 体现 了 严格 把 构建 的 中 间 产 物 和 源码 分 开 的 好 处 。 
使 用 lint 程 序 检查 代码 通常 被 认为 是 把 JavaScript 代 码 保持 在 合理 质量 水 平 的 第 一 道 防线 。 使 
用 lint 程 序 检查 代码 后 ， 仍 然 要 编写 单元 测试 ， 下 面 我 会 告诉 你 原因 。 你 可 能 猜 到 了 ，Grunt 任 务 
也 能 运行 单元 测试 。 
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2.3.3 自动 运行 单元 测试 


构建 过 程 中 最 需要 自动 执行 的 步 又 之 一 是 运行 单元 测试 。 单 元 测试 的 作用 是 确保 代码 基 中 的 
各 个 组 件 能 正常 运作 。 开 发 测试 良好 的 应 用 有 个 流行 的 流程 ， 如 下 所 示 : 

口 为 想 实 现 〈 或 修改 ) 的 功能 编写 测试 ; 
口 运行 测试 ， 看 着 它们 失败 ; 
口 编写 代码 ; 
口 再 次 运行 测试 。 

如 果 有 测试 失败 ， 继 续 写 代 码 ， 让 所 有 测试 都 通过 ， 然 后 再 编写 新 测试 。 这 个 过 程 叫 测试 驱 
动 开 发 〈Test-Driven Development， 简 称 TDD )。 第 8 章 会 详细 介绍 单元 测试 。 这 个 话题 需要 专门 
的 章节 介绍 ， 所 以 我 们 会 在 后 续 章 节 讨论 如 何 设置 运行 单元 测试 的 Grunt 任 务 。 

现在 我 们 只 需 知道 ， 单 元 测试 必须 要 自动 运行 。 如 果 不 常 运行 测试 ， 测试 几乎 就 是 个 摆设 ， 
所 以 部 署 之 前 在 构建 过 程 中 要 运行 测试 , 或许 在 本 地 构建 时 也 要 运行 测试 。 除 此 之 外 , 我 们 还 想 
证 单元 测试 运行 得 尽量 快 ， 以 免 降低 构建 的 性 能 。 测 试 的 原则 是 “尽早 测试 ， 经 常 测试 ”。 


































































































注解 我 们 目前 介绍 的 各 个 包 都 只 提供 了 一 个 任务 ， 这 不 是 Grunt 做 出 的 限制 ， 而 是 包 的 作者 故 
意 这 么 做 的 。 如 果 觉 得 有 必要 ， 可 以 在 包 中 添加 任意 多 个 自 定义 的 任务 。npm 中 的 包 通常 
都 采用 模块 化 设计 ， 因 为 它们 的 目的 就 是 只 做 一 件 事 ， 并 且 要 做 到 最 好 。 








本 章 大 部 分 内 容 都 是 教 你 如 何 使 用 别人 编写 的 构建 任务 。 下 面 我 们 要 自己 动手 编写 构建 任 
务 。 如 果 发 现 npm 中 的 任务 插件 不 能 满足 需求 ， 就 得 自己 动手 了 。 


2.4 首次 自己 编写 构建 任务 


虽然 Grunt 的 社区 很 活跃 , 提供 了 很 多 高 质量 的 npm 模 块 , 但 你 肯定 会 遇 到 需要 自己 编写 任务 
的 时 候 。 下 面 我 们 通过 一 个 实例 说 明 如 何 编写 任务 。 前 面 已 经 介绍 了 如 何 加 载 从 npm 中 安装 的 任 
务 ， 还 介绍 了 如 何 设置 任务 别名 。 创 建 任务 最 简单 的 方式 是 使 用 grunt .registerTask 方 法 。 
2.2.4 节 介绍 简化 时 用 过 这 个 方法 ， 当 时 我 们 传人 的 是 一 组 任务 ， 不 过 现在 我 们 要 传人 一 个 函数 。 

下 列 代 码 清单 (在 本 书 配 套 源 码 的 ch02/09_timestamp-task 文 件 夹 中 ) 展示 了 如 何 编写 一 个 简 
单 的 构建 任务 。 这 个 任务 的 作用 是 创建 一 个 时 间 惟 ,并 将 其 写 人 一 个 文件 。 在 应 用 的 某 个 地 方 可 
能 会 把 这 个 时 间 戳 当 作 唯一 标识 使 用 


代码 清单 2.8 创建 时 间 戳 的 任务 
grunt.registerTask('timestamp', function() { 


var options = this.options({ RE 读 取 配置 , 并 提供 合理 的 


0 '.timestamp' 默认 值 ， 以 防 没有 配置 。 


var timestamp = +new Date(); 革 i 
() ， “\、 把 日 期 转换 成 Unix 


Var contents = timestamp.toString(); 时 间 戳 
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grunt.file.write(options.file, contents); EN 在 任务 配置 指定 的 
) ) ; 位 置 创建 一 个 文件 。 
默认 情况 下 , 时 间 戳 会 写 和 一 个 名 为 timestamp 的 文件 。 不 过 , 因为 我 们 使 用 的 是 this.options ， 
因此 用 户 配置 这 个 任务 时 可 以 修改 这 个 选项 ， 使 用 其 他 文件 ， 如 下 列 代 码 所 示 : 
grunt.initConfig(t{ 
timestamp: { 
options: { 
file: 'your/file/path' 
} 


} 
} 


其 实 ， 自 己 编写 构建 任务 只 需 做 到 这 一 点 就 行 了 。Grunt 的 API 很 丰富 ， 抽 象 了 常用 的 功能 ， 
能 轻易 实现 配置 、 执 行 WO 操 作 、 执 行 其 他 任务 或 异步 执行 任务 。Grunt API 的 文档 很 详细 ， 你 可 
以 去 它 的 网 站 查看 。” 

附录 B 对 Grunt 作 了 全 面 介绍 。 这 个 timestamp 任 务 特别 简单 , 下 面 来 看 一 个 你 可 能 想 实现 的 
真正 的 Grunt 任 务 。 


2.5 案例 分 析 : 数据 库 任务 


前 面 提 到 ， 自 己 编写 构建 任务 并 不 复杂 。 不 过 , 在 自己 重新 发 明 轮 子 之 前 , 一 定 要 明确 你 使 
用 的 任务 运行 程序 (例如 本 书 使 用 的 Grunt ) 是 否 已 经 有 了 这 个 任务 。 大 多 数 任务 运行 程序 都 提供 
了 某 种 搜索 插件 的 功能 , 所 以 在 自己 动手 编写 之 前 要 在 网 上 搜索 一 下 。 下面 我 们 来 看 一 个 案例 一 一 
更 新 数据 库 模式 , 说 明 如 何在 构建 过 程 中 自动 执行 这 个 操作 。 因 为 没有 多 少 插件 是 针对 这 个 操作 
的 ， 所 以 我 们 只 能 自己 开发 。 












































这 个 数据 库 案例 的 代码 

注意 ,本 书 没有 列 出 这 个 案例 的 代码 。 不 过 ,在 本 书 的 配套 源码 中 有 完整 可 用 的 代码 ,在 
ch02/10_mysql-tasks 文 件 夹 中 可 以 查看 。” 

看 代码 之 前 要 先 阅读 这 一 节 的 内 容 ， 和 再 明白 代码 的 作用 ， 以 及 为 什么 这 么 写 。 

















数据 库 迁 移 是 这 些 任 务 中 最 难 设 置 的 一 个 , 设置 好 之 后 , 你 还 要 知道 如 何在 自动 化 过 程 中 集 
成 这 个 任务 。 

一 般 来 说 ,开始 时 我 们 会 使 用 最 初 为 应 用 设计 的 数据 库 模式 。 在 开发 的 过 程 中 , 我 们 可 能 会 
调整 模式 ,例如 增加 一 个 表 、 删 除 不 需要 的 字段 、 修 改 约束 条 件 等 等 。 

我 们 通常 会 以 这 些 操作 不 能 自动 执行 、 需 要 谨慎 对 待 的 借口 来 手动 执行 这 些 模 式 更 新 操作 ， 
而 手动 执行 这 些 操作 会 浪费 大 量 的 时 间 。 在 操作 的 过 程 中 很 容易 犯错 ， 这 样 会 浪费 更 多 的 时 间 。 

















Q@ Grunt 的 文档 可 在 它 的 网 站 中 查看 ， 地 址 是 http://gruntjs.com/。 
@ 网 上 有 这 个 数据 库 案例 的 代码 示例 ， 地 址 是 http://bevacqua.io/bf/db-tasks。 
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毋庸 置疑 ， 这 在 大 型 开发 团队 中 是 不 可 接受 的 。 
1. 双向 修改 模式 





我 建议 这 些 自动 执行 的 任务 应 该 能 灵活 地 双向 处 到 








迁移， 既 能 升级 也 能 回 深 。 如 果 编 写 得 够 




















仔细 ,还 能 把 这 些 任务 集成 到 自动 化 过 程 中 。 记 住 ,我们 只 能 在 这 些 任务 中 应 用 模式 的 变动 ， 决 














不 能 把 它 直接 应 用 到 数据 库 中 。 认 识 到 这 一 点 之 后 , 我 们 还 可 以 考虑 再 实现 两 个 任务 : 一 个 月 








日 来 


完全 重新 创建 数据 库 ; 另 一 个 把 数据 填充 到 数据 库 中 ,辅助 开发 。 有 了 这 些 任 务 ， 我 们 就 能 在 命 





令 行 中 管理 数据 库 ， 轻 松 创建 新 实例 、 修 改 模式 、 填 充 数据 ， 还 能 回 滚 改 动 。 
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| 全 | 
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数据 库 任 务 








Grunt 自 动 化 任务 

























db_create 


创建 数据 库 
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创建 数 使 用 脚本 创建 数据 库 最 初 
的 模式 








氏 
至 
要 
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db_upgrade 
更 新 模式 


























用 于 更 新 模 创建 数据 库 后 ， 使 月 
逐步 更 新 模式 





db_seed 
填充 数据 













































































于 填充 数 使 用 脚本 把 虚拟 数据 填充 
据 的 脚本 到 数据 库 中 ， 快 速 搭 建 有 
四 用 的 开发 环境 
只 可 滚 模式 更 新 
db_rollback 
可 滚 模式 
干 后 次 模 出 问题 时 使 用 脚本 回 潜 有 
人 问题 的 模式 改动 











图 2-7 任务 与 数据 库 实例 的 交互 

















图 2-7 把 这 些 步 又 和 Grunt 任 务 放 在 一 起 ， 概 述 了 这 些 任务 的 作用 以 及 各 个 任务 是 如 何 与 数据 


库 交 互 的 。 
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仔细 看 这 幅 图 ， 你 会 发 现 这 样 一 个 流程 : 
口 创建 数据 库 ， 且 只 创建 一 次 ; 
口 有 新 模式 时 运行 脚本 更 新 模式 ; 
口 把 数据 填充 到 开发 数据 库 中 ， 只 填充 一 次 ; 
口 运行 回 滚 脚本 ， 这 是 一 个 安全 保障 ， 以 防 出 了 什么 问题 。 

db_create 任 务 的 作用 是 创建 一 个 数据 库 实例 , 仅 此 而 已 。 如 果 数 据 库 已 经 存在 , 为 了 防止 
出 问题 ， 它 就 不 能 再 次 创建 。 这 个 任务 不 能 向 数据 库 中 写 人 任何 模式 : 数据 表 、 视 图 、 步 又 等 都 
是 下 一 步 的 任务 。 

db_upgrade 任 务 会 运行 升级 脚本 , 但 只 会 执行 还 没 被 执行 的 脚本 。 请 查看 本 书 的 配套 源码 ， 
了 解 这 一 步 是 如 何 运 作 的 。 简单 来 说 , 我 们 创建 了 一 个 数据 表 ， 记录 已 经 执行 了 哪些 升级 脚本 。 
然后 再 检查 未 执行 的 脚本 是 否 存 在 ， 如 果 存在 就 执行 ， 最 后 更 新 跟踪 记录 。 

2. 要 有 后 备 计 划 

如 果 出 问题 了 ，gdb_rollback 任 务 会 找 出 最 后 执行 的 那个 升级 脚本 ， 执 行 反 向 降级 模式 。 
然后 这 个 任务 会 更 新 那个 跟踪 数据 表 ， 删除 最 后 一 个 记录 。 这 样 , 使 用 这 两 个 任务 就 可 以 来 回升 
级 和 回 深 模 式 了 。 注 意 ，db_upgrade 任 务 会 执行 所 有 还 未 执行 的 升级 脚本 ， 而 db_rollback 
任务 只 会 回 滚 最 后 执行 的 那个 升级 脚本 。 

db_seed 任 务 的 作用 是 插入 记录 ， 让 你 在 开发 环境 中 有 数据 可 操作 。 这 个 任务 很 重要 ， 新 开 
发 者 搭建 可 使 用 的 开发 环境 时 只 需 轻 松 地 执行 这 些 任务 就 行 。 新 开发 者 执行 的 任务 和 图 2-7 中 的 
差不多 。 

现在 ， 你 可 以 查看 这 些 数据 库 任务 带 有 完整 注释 的 代码 了 ( 在 本 书 配套 源码 的 ch02/10_ 
mysql-tasks 文 件 夹 中 )， 体 会 一 下 这 些 任务 的 实现 方式 。” 

在 后 面 的 章节 中 你 会 看 到 配置 任务 的 不 同方 式 , 例如 不 直接 使 用 配置 文件 , 而 使 用 环境 变量 
和 存储 环境 配置 的 加 密 JSON 文 件 。 











































































































2.6 总 结 


本 章 介绍 了 很 多 构建 任务 的 知识 ， 下 面 简要 概括 一 下 。 
口 构建 过 程 应 该 让 所 有 操作 都 能 方便 执行 ， 生 成 一 个 配置 完好 的 环境 ， 拿 来 就 能 使 用 。 
口 不 同 的 任务 在 构建 过 程 中 要 清楚 地 分 开 ， 类 似 的 任务 要 通过 任务 目标 组 织 在 一 起 。 
口 构建 过 程 中 的 任务 主要 包括 : 编译 静态 资源 ， 优 化 、 执 行 lint 程 序 检查 代码 ， 以 及 运行 单 
元 测试 。 
口 介绍 了 如 何 自 己 编写 构建 任务 ， 以 及 如 何 自动 更 新 数据 库 模 式 。 
在 这 些 知识 的 基础 上 , 接 下 来 的 两 章 里 我 们 会 进一步 学 习 如 何 针对 不 同 的 环境 构建 应 用 , 即 
本 地 开发 环境 和 线 上 服务 器 环境 。 我 们 还 要 学 习 一 些 最 佳 实践 ， 以 帮 你 尽量 提升 效率 和 性 能 。 


















































G@) 网 上 有 这 个 数据 库 任务 的 代码 示例 ， 地 址 是 http:Wbevacqua.io/bffrdb-tasks。 
@) 可 以 深入 研究 一 下 本 章 出 现 的 代码 示例 ， 尤 其 是 名 为 10_mysql-tasks 的 示例 。 
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本 章 内 容 

口 创建 构建 模式 和 工作 流程 
口 设置 应 用 所 在 的 环境 

口 安全 地 配置 环境 

口 自动 化 首次 设置 的 过 程 

口 使 用 Grunt 实 现 持 续 开 发 




















前 一 章 讲 解 了 构建 过 程 中 该 做 的 和 不 该 做 的 事 , 介绍 了 儿 个 构建 任务 , 以 及 如 何在 任务 中 配 
置 不 同 的 目标 。 我 还 暗示 大 家 , 构建 应 用 的 目的 不 同 会 导致 使 用 的 工作 流程 不 同 ， 即 我 们 可 能 是 
为 了 调试 而 构建 , 也 可 能 是 为 了 发 布 而 构建 。 这 种 基于 你 的 目标 环境 的 调试 或 发 布 目标 的 构建 流 
程 之 间 的 差异 ， 叫 作 构 建 模式 。 

理解 开发 环境 、 过 渡 环 境 和 生产 环境 三 者 之 间 的 相互 联系 ,以 及 理解 构建 模式 , 是 至 关 重 要 
的 。 这 样 才能 创建 出 在 各 种 环境 中 都 能 使 用 的 构建 过 程 ， 才 能 开发 出 最 终 用 户 期 望 看 到 的 应 用 ， 
才能 轻松 调试 应 用 。 理解 这 些 之 后 , 我 们 还 能 搭建 中 间 环 境 , 这 对 可 靠 的 部 署 机 制 是 十 分 重要 的 ， 
下 一 章 会 介绍 。 

本 章 首先 会 介绍 什么 是 环境 和 构建 模式 , 然后 会 介绍 一 个 典型 的 配置 。 这 个 配置 能 满足 大 部 
分 需求 ， 包 含 以 下 三 个 环境 。 

口 本 地 开发 环境 : 用 于 日 常 开发 应 用 。 

口 过 渡 环 境 (或 叫 测试 环境 ) 专门 用 于 确保 部 署 到 生产 环境 后 不 会 出 现 问题 。 

口 生产 环境 : 用 户 能 访问 的 环境 。 

最 后 , 我 们 会 学 习 在 不 同情 境 下 配置 应 用 的 不 同方 式 。 你 会 学 到 如 何 自 动 执行 烦人 的 首次 设 
置 ， 以 及 如 何 使 用 Grunt 设 置 用 于 持续 开发 的 流程 。 开 始 学 习 吧 。 


3.1 应 用 的 环境 


前 一 章 稍 微 提 到 了 环境 , 不 过 我 们 没 详细 说 明 配 置 新 环境 的 方式 , 以 及 不 同 环境 之 间 的 区 别 。 
我 们 的 大 部 分 时 间 都 用 在 开发 环境 中 ,在 本 地 Web 服 务 器 中 作 开 发 。 这 个 环境 通常 比 其 他 环 







































































图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


3.1 应 用 的 环境 43 





境 更 易于 调试 ,能 轻易 阅读 堆栈 跟踪 ， 也 便于 诊断 问题 。 开 发 环境 也 是 离开 发 者 和 开发 者 所 编写 
的 代码 最 近 的 环境 。 在 这 个 环境 中 使 用 的 应 用 几乎 都 是 使 用 调试 模式 构建 的 。 在 调试 模式 中 , 我 
们 可 以 设置 一 个 标志 ， 用 于 开局 某 些 功能 ， 例 如 调试 代码 中 的 符号 、 输 出 更 详细 的 日 志 等 。 

过 渡 环 境 用 来 确保 应 用 在 主机 环境 中 一 切 都 正常 ,部署 到 生产 环境 后 不 会 出 问题 。 生 产 环境 
使 用 的 应 用 几乎 都 使 用 发 布 模式 构建 , 因为 这 个 构建 流程 能 优化 应 用 的 性 能 , 并 能 大 大 减少 静态 
资源 占用 的 字 节 数 。 

下 面 我 们 来 看 一 下 如 何 为 这 些 环境 配置 构建 模式 , 让 构建 得 到 的 结果 符合 特定 的 目标 : 用 于 
调试 或 发 布 。 


3.1.1 配置 构建 模式 


为 了 便于 理解 构建 模式 , 你 可 以 把 构建 应 用 的 过 程 想象 成 在 面包 店 的 工作 。 准备 做 蛋糕 的 配 
料 时 ,能 用 来 装 面糊 的 模具 有 很 多 : 可 以 使 用 标准 的 圆 形 和 蛋糕 模 、 方 形 的 烤 盘 、 长 条 型 烤 模 ,或 
者 手边 有 的 其 他 模具 。 这 些 模具 就 像 是 开发 环境 中 使 用 的 工具 一 样 ， 而 开发 环境 就 相当 于 厨房 。 
做 蛋糕 的 配料 都 一 样 : 面粉 、 奶 油 、 糖 、 少 量 盐 、 可 可 粉 、 鸡 蛋 和 半 杯 酸奶 。 用 来 做 蛋糕 的 这 些 
配料 相当 于 应 用 中 的 静态 资源 。 

而 且 ， 做 蛋糕 时 我 们 要 参照 食谱 ， 看 怎么 把 配料 混在 一 起 ， 什 么 时 候 加 什么 配料 ， 加 多 少 ， 
还 要 知道 在 冰箱 中 要 放 多 久 才 能 得 到 好 的 粘 稠 度 , 然后 再 放 到 温度 合适 的 烤箱 里 。 使 用 的 食谱 不 
同 ,做 出 的 蛋糕 也 不 一 样 ， 可 能 是 海绵 蛋糕， 也 可 能 是 硬 皮 和 蛋糕。 与 此 类 似 , 使 用 不 同 的 构建 模 
式 得 到 的 应 用 也 不 同 ， 有 的 易于 调试 ， 有 的 则 性 能 更 好 。 

你 可 能 想 换 种 混 料 的 方式 ,换个 配料 ( 静态 资源 ), 或 者 干脆 换个 食谱 ( 构建 模式 )， 不 过 这 
个 过 程 还 是 要 在 厨房 〈 开 发 环境 ) 里 展开 。 

最 终 ， 你 会 掌握 烤 和 蛋糕 的 方法 ， 然 后 去 参加 竞赛 。 竞 赛 所 处 的 环境 变 了 ， 所 提供 的 也 是 专业 
的 工具 。 你 会 在 别人 指导 下 利用 可 用 的 材料 烤 蛋 糕 。 你 可 能 会 自己 选 配料 , 或 者 用 糖浆 提升 蛋糕 
的 口感 , 或 者 比 在 自己 的 厨房 中 烤 得 久 一 点 。 这 些 做 法 上 的 变化 都 受到 了 所 处 环境 的 影响 ， 因 为 
环境 可 能 会 影响 你 选择 使 用 的 食谱 ， 不 过 你 仍然 可 以 在 任何 环境 中 使 用 任何 你 觉得 合适 的 食谱 。 

注意 , 构建 模式 仅 限 于 针对 调试 或 发 布 , 不 过 , 只 要 你 觉得 有 必要 , 可 以 配置 任意 多 个 环境 ， 
使 用 这 两 个 模式 中 的 任何 一 个 。 环 境 和 构建 模式 没有 一 一 对 应 的 关系 。 每 个 环境 都 有 推荐 使 用 的 
构建 模式 ， 但 这 个 推荐 的 模式 不 是 一 成 不 变 的 。 例 如 , 在 开发 环境 中 一 般 使 用 调试 模式 ， 因 为 这 
个 模式 能 提升 日 常 开发 的 效率 。 不 过 你 偶尔 也 可 以 在 开发 环境 中 试 试 发 布 模式 , 在 部 署 到 生产 环 
境 之 前 确认 应 用 能 在 不 同 的 环境 中 正常 运行 。 

1. 决定 使 用 哪个 构建 模式 

你 几乎 不 可 能 在 任何 厨房 里 都 能 烤 出 蛋糕 ， 因 为 有 些 烤 箱 、 模 具 和 煮 锅 你 用 着 可 能 不 顺手 。 
类 似 地 , 构建 过 程 对 于 其 目标 环境 无 法 进行 过 多 的 控制 。 不 过 你 可 以 根据 目标 环境 的 目的 决定 哪 
个 构建 模式 更 合适 。 环 境 的 目的 无 非 有 以 下 两 种 。 

口 为 了 调试 ， 目 标 是 快速 开发 和 调试 应 用 。 
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口 为 了 发 布 ， 目 标 是 良好 的 性 能 和 正常 运行 的 时 间 。 
目的 不 同 ， 使 用 的 构建 模式 也 不 同 。 在 开发 环境 中 要 使 用 更 符合 开发 需求 的 模式 ， 这 些 需 


求 基本 上 就 是 找 出 并 解决 问题 ， 因 此 要 使 用 调试 模式 。 本 章 稍 后 会 











介绍 增强 这 个 流程 的 方式 ， 


让 它 不 仅 便于 调试 ， 还 要 实现 真正 的 持续 开发 ， 在 任务 涉及 的 代码 发 生变 化 时 自动 执行 相关 的 
构建 任务 。 

图 3-1 列 出 了 一 些 问题 和 答案 ， 让 你 根据 自己 的 目的 决定 使 用 哪个 构建 模式 ， 然 后 再 通过 配 
置 使 用 选 定 的 构建 流程 。 





2. 
























































构建 模式 
构建 的 相关 考量 
( 答案 取决 于 你 的 目标 | 
问题 调试 模式 发 布 模式 

















构建 流程 要 运行 得 快 吗 ? 


= 
| 


拟定 构建 流程 时 间 自 己 
这 些 问题 。 











| .| 快速 的 调试 流程 对 持续 开 











间 产 物 ， 影 响 优化 。 


发 





流程 有 好 处 。 


| 


目标 是 效率 最 大 化 、 便 
于 调试 和 持续 开发 。 





构建 流程 一 定 要 寡 等 吗 ? | ,| 是 ! 构建 结果 始终 一 致 对 快 是 ! 
速 迭 代 很 重要 。 

应 该 做 哪 种 测试 ? | ,| 使 用 lint 程 序 检 查 代码 ， 还 要 运行 所 有 测试 ! 
快速 运行 单元 测试 。 

必须 要 便于 调试 吗 ? |_ .| 是 。 调 试 流程 必须 做 到 这 一 不 ， 但 能 做 到 的 话 更 好 。 
人 

会 得 到 最 佳 结果 吗 ? ` 会 ， 调 试 过 程 中 会 得 到 中 一 切 为 了 性 能 。 





目标 是 
要 测试 
用 起 来 


不 必要 ， 但 如 果 能 快 的 话 更 
好。 








| 


发 布 面向 用 户 的 产品 ， 
良好 、 运 行 速度 快 、 
舒服 。 











图 3-1 


生产 环境 使 用 的 构建 模式 








构建 模式 以 及 为 了 实现 特定 目标 而 定义 的 构建 流程 





离开 发 环境 最 远 的 是 生产 环境 。 继 续 以 烤 蛋 糕 为 例 , 现在 我 们 要 ; 
的 欢心 ， 因 此 必须 使 用 最 好 的 食谱 。 生 产 环 境 的 目的 是 服务 于 应 用 ,让 最 终 用 户 访问 ,并 处 理 用 
户 提 供 的 数据 。 
这 和 开发 环境 有 所 不 同 。 在 开发 环境 中 我 们 通常 使 用 虚拟 数据 , 但 它们 看 起 来 很 像 用 户 提供 
的 真实 数据 。 生 产 环境 很 少 使 用 发 布 模式 之 外 的 模式 构建 应 用 。 发 布 模式 通常 把 性 能 视 为 最 重要 


























考 出 高 档 的 蛋糕 ， 赢 得 客户 
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的 因素 ， 且 根据 第 2 章 所 提 到 的 ， 这 意味 着 会 简化 和 打包 静态 资源 ， 生 成 图 标的 子 图 集 表单 ， 还 
会 优化 图 像 等 ,这些 话题 在 第 4 章 还 会 再 讨论 。 尽管 生产 环境 不 能 使 用 调试 模式 构建 得 到 的 应 用 ， 
但 你 一 定 要 确保 用 于 发 布 的 构建 过 程 在 开发 环境 中 可 以 使 用 。 

3. 过 渡 环 境 使 用 的 构建 模式 

在 开发 环境 和 生产 环境 之 间 , 可 能 还 有 过 渡 环 境 。 这 个 环境 的 目的 是 尽量 复制 生产 环境 使 用 
的 配置 (但 不 会 影响 用 户 的 数据 ， 也 不 会 和 生产 环境 使 用 的 服务 交互 )。 过 渡 环 境 通 常 不 会 在 本 
地 设备 中 搭建 。 我 们 可 以 从 面包 师 的 角度 来 看 这 个 环境 的 作用 : 不 管 在 哪个 厨房 烧 ， 都 想 保证 做 
出 的 蛋糕 具备 一 定 的 质量 水 平 。 

过 渡 环 境 可 能 是 自己 的 厨房 之 外 的 其 他 地 方 , 但 不 会 是 餐馆 的 厨房 如果 你 想 为 朋友 烤 和 蛋糕 ， 
那么 使 用 的 就 是 她 的 厨房 .过渡 环境 处 在 生产 环境 和 开发 环境 之 间 , 尽量 和 这 两 个 环境 保持 一 致 。 
为 此 ,过 渡 环 境 可 能 要 定期 获取 生产 数据 库 的 删 减 版 (去掉 或 过 滤 掉 了 敏感 数据 ,例如 信用 卡 账 
户 和 密码 )。 这 个 环境 使 用 的 构建 模式 由 测试 的 目的 而 定 ， 不 过 一 般 默 认 使 用 发 布 模式 ， 因 为 这 
样 能 尽量 模拟 生产 环境 。 

过 渡 环 境 的 真正 目的 是 ， 让 质量 保证 ( Quality Assurance， 简 称 QA ) 工程 师 和 产品 的 所 有 者 
等 在 部 署 到 生产 环境 之 前 测试 应 用 。 过 渡 环 境 基 本 上 和 生产 环境 一 样 ( 除了 最 终 用 户 不 能 访问 )， 
团队 成 员 在 不 影响 生产 环境 的 前 提 下 , 能 迅速 发 现 即将 发 布 的 这 个 版 本 有 什么 问题 , 还 能 确认 这 
个 版 本 在 主机 环境 中 是 否 能 像 预 期 的 那样 运行 。 

下 面 我 们 来 看 一 些 代码 ,考虑 如 何在 构建 过 程 中 开展 配置 ,让 构建 任务 在 所 属 的 构建 流程 ( 调 
试 或 发 布 ) 中 充分 发 挥 作用 。 

4. 在 Grunt 任 务 中 设置 不 同 的 构建 模式 

第 2 章 介绍 了 几 个 构建 任务 及 其 配置 ， 但 这 些 任 务 几乎 都 是 独立 的 ， 不 属于 某 个 流程 。 通 过 
构建 模式 我 们 能 改进 构建 过 程 ， 让 任务 在 特定 的 构建 流程 中 使 用 。 这 个 流程 是 为 了 方便 调试 , 还 
是 为 了 得 到 更 小 的 文件 和 更 少 的 HTTP 请 求 数 ? 如 果 在 Grunt 任 务 和 别名 中 使 用 特定 的 命名 约定 ， 
就 能 更 轻易 地 看 出 流程 的 作用 。 

一 般 来 说 , 我 建议 根据 任务 目标 针对 的 是 哪个 构建 模式 ,把 构建 目标 命名 为 aebug 或 elease。 

通用 的 任务 不 用 遵守 这 个 约定 ， 例 如 jshint ， 各 个 目标 可 以 继续 使 用 jshint:client、 
jshint:server 和 jshint:support 等 名 称 。 除 了 服务 需 或 客户 端 相 关 的 目标 之 外 ， 构 建 和 部 
署 相 关 的 目标 都 可 以 命名 为 support。 
使 用 这 个 命名 约定 ， 你 会 发 现 有 很 多 类 似 的 任务 ， 例如 jada Ce bug 和 1 ss:debug, 这 些 
任务 可 以 放 在 一 起 ,注册 成 pui1g:qdebug 别 名 。 发 布 模式 也 可 以 这 么 做 ,这样 在 配置 和 记忆 中 
都 能 把 不 同 的 构建 流程 清楚 地 分 开 。 下 列 代码 清单 ( 在 配套 源码 的 03/01_distribution-config 文 件 
夹 中 ) 展示 了 如 何在 配置 中 把 不 同 的 构建 流程 分 开 。 


代码 清单 3.1 按 构建 模式 配置 


grunt.initConfig(t{ 
jshint: { 
client: [public/js/**/*.. JS"], 
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server: ['server/**/*.js'], 


support: ['Gruntfile.js'] 
jy ‘ 过 
eae less:debug 这 个 任务 目标 是 为 了 在 开发 
Be 4/ 环境 中 把 LESS 文 件 编译 成 CSS 文 件 。 
files: { 
编译 属性 值 对 应 的 文 'build/css/layout.css': 'public/css/layout.less', 
件 会 把 结果 写 入 属性 $2 'build/css/home.css': 'public/css/home.less’ 
对 应 的 文件 。 } 
5 
| { release 目 标 只 在 
res: 发 布 流程 中 使 用 。 
'build/css/all.css': | 
'public/css/**/*.less'! 汉 通 配 模 式 把 所 有 LESS 样 式 表 
y 的 结果 写 入 一 个 CSS 文 件 中 。 
} 
} 
jade: { 
debug: { 


options: < 
5 注意 ，jade :debug 任 务 设置 
pretty: true 


)， 了 一 个 发 布 流程 没有 的 选项 。 
files: { 
'build/views/home.html': 'public/views/home.jade' 
} 
ks 
release: { 
files: { 
'build/views/home.html': 'public/views/home.jade' 
} 
} 
} 
和 


这 样 分 开设 置 后 能 轻易 创建 别名 ， 使 用 不 同 的 构建 模式 构建 应 用 。 下 面 是 一 些 别 名 示例 : 


grunt .registerTask('build:debug', ['jshint', 'less:debug', 'jade:debug']); 
grunt .registerTask('build:release', ['jshint', 'less:release', 
'jade:release']); 


本 书 配套 源码 的 仓库 中 有 完整 可 用 的 代码 清单 示例 。 记 住 ， 这 些 示例 是 按 章 组 织 的 , 所 以 这 
里 你 要 查看 的 代码 清单 在 第 3 章 下 的 01_distribution-config 文 件 夹 中 。 

上 述 代码 清单 为 你 继续 构建 提供 了 坚实 的 基础 。 你 可 以 继续 增强 各 个 流程 , 在 这 些 构建 模式 
中 添加 更 多 的 任务 ， 还 可 以 重用 前 面 的 任务 ， 例 如 jshint。 如 果 某 些 任务 只 在 其 中 一 个 构建 模 
式 中 使 用 , 那 就 添加 到 对 应 的 流程 中 。 例 如 ,在 调试 模式 中 可 能 修改 了 要 发 布 的 产品 ， 因 此 你 可 
能 想 在 发 布 流程 中 添加 修改 变更 日 志 的 任务 , 在 要 部 署 的 版 本 中 说 明 变 动 的 地 方 。 本章 后 面 会 再 
讨论 这 个 话题 , 介绍 专门 在 调试 模式 中 使 用 的 任务 。 第 4 章 会 分 析 专 门 在 发 布 模式 中 使 用 的 任务 。 

至 此 , 我 们 介绍 了 什么 是 构建 模式 ,以 及 组 织 构建 过 程 时 如 何 定义 不 同 的 流程 。 下 面 开 始 介 
绍 如 何在 各 个 环境 中 配置 应 用 ， 或 者 叫 作 环境 层面 的 配置 。 
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3.1.2 ”环境 层面 的 配置 


环境 的 配置 和 构建 模式 是 分 开 的 , 而 且 二 者 之 间 的 区 别 很 明显 : 构建 模式 的 作用 是 决定 如 何 
构建 应 用 , 不 应 该 对 应 用 本 身 有 任何 影响 ， 只 能 影响 构建 过 程 ， 或 者 更 准确 地 说 ， 只 能 影响 你 使 
用 的 构建 流程 ;而 环境 的 配置 是 针对 环境 的 。 






























































环境 层面 的 配置 包括 什么 ? 

从 现在 开始 ,， 本章 所 说 的 配置 都 是 指环 境 层面 的 配置 ,除非 有 特殊 说 明 。 我 所 说 的 环境 层 
面 的 配置 是 指 下 面 这 些 类 型 的 值 : 

口 数据 库 连 接 字符 串 ; 

口 API 认 证 凭据; 

口 会 话 加 密 密 令 ; 

口 监听 HTTP 请 求 的 Web 服 务 器 端口 。 

这 种 配置 通常 包含 敏感 数据 ,我 非常 不 建议 你 使 用 纯 文本 保存 这 些 机 密 信 息 , 然后 和 其 他 
代码 放 在 一 起 。 其 他 开发 者 不 应 该 能 直接 访问 这 些 服务 , 例如 数据 库 , 从 而 也 不 应 该 能 访问 用 
户 的 数据 。 这 也 是 一 种 攻击 途径 : 获取 了 代码 仓库 之 后 ， 就 能 访问 数据 库 或 API 密 令 ， 而 最 粮 
糕 的 是 ,访问 用 户 的 数据 。 

这 方面 有 个 极 好 的 经 验 法 则 : 像 开发 开源 软件 那样 开发 你 的 应 用 。 你 
API 密 钥 和 数据 库 连 接 字 符 串 推送 到 公开 可 访问 的 开源 项 目 托管 仓库 ， 不 是 





肯定 不 会 把 敏感 的 
吗 ! 





图 3-2 描 述 了 构建 得 到 的 结果 是 怎么 结合 环境 配置 伺服 应 用 的 。 

1. 构建 流程 

从 上 图 的 左边 可 以 看 出 ， 调 试 和 发 布 模式 只 影响 构建 本 身 ， 而 环境 的 配置 会 直接 影响 应 用 ， 
不 管 在 构建 得 到 应 用 后 使 用 的 是 调试 模式 还 是 发 布 模式 。 

2. 环境 层面 的 配置 

应 用 的 配置 一 定 要 针对 特定 的 环境 。 别 把 环境 变量 和 构建 模式 搞 混 了 , 构建 模式 只 会 影响 构 
建 过 程 本 身 。 应 用 的 配置 是 指 一 些小 型 的 数据 (往往 都 是 敏感 数据 )， 例 如 数据 库 连 接 字符 串 、 
API 密 钥 、 加 密 密 令 和 日 志 的 详细 程度 等 。 

构建 模式 中 一 般 不 包含 敏感 数据 , 但 环境 层面 的 配置 常常 包含 。 例 如 ， 环境 的 配置 中 可 能 
含 数据 库 实 例 、Twitter 等 API 服 务 的 访问 凭据 ,可 能 还 有 用 于 通过 IMAP 协 议 发 送 电子 邮件 的 用 户 
名 和 密码 。 

不 过 , 不 是 所 有 环境 的 配置 都 是 敏感 数据 ， 如 果 汇 露 了 也 不 一 定 会 造成 安全 威胁 。 例 如， 应 
用 的 监听 端口 和 决定 日 志 详 细 程 度 的 配置 都 是 环境 层面 的 配置 ， 但 这 些 配 置 根 本 不 是 敏感 信息 。 
话 虽 如 此 , 但 也 不 能 区 别 对 待 安全 的 配置 和 敏感 的 配置 。 不 过 你 可 以 使 用 安全 的 变量 如 应 用 的 监 
听 端 口 来 提供 配置 的 默认 值 。 但 是 ， 如 果 配 置 是 敏感 数据 ， 就 决 不 能 这 么 做 。 

本 章 只 讲解 开发 环境 ， 下 一 章 再 介绍 过 渡 环 境 和 生产 环境 。 
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环境 层面 的 配置 
应 用 服务 器 方面 





























构建 流程 应 用 服务 器 


调试 模式 环境 中 有 一 个 用 于 伺服 应 用 的 主机 ， 
可 以 是 本 地 设备 ， 也 可 以 是 托管 的 方 





为 了 调试 而 优化 案 ， 还 有 相关 的 环境 配置 。 


发 布 模式 


为 了 性 能 而 优化 开发 环境 过 渡 环境 生产 环境 


4 4 





























只 有 各 个 开发 发 者 和 产品 。 最 终 用 户 可 
者 能 访问 -发 人 员 能 通 ”以 公开 访问 
过 互联 网 访问 












































图 3-2 ”环境 层面 的 配置 一 环境、 配置 和 发 行 版 一 起 组 成 一 个 应 用 。 环 境 的 配置 包括 
机 密 赁 据 和 不 同 环境 之 间 可 能 有 所 不 同 的 配置 。 
































3.1.3 ”开发 环境 有 什么 特别 之 处 


和 其 他 环境 相 比 ， 本 地 开发 环境 有 什么 区 别 呢 ”区别 说 大 也 大 , 说 小 也 小 。 其 中 最 显著 的 两 
个 区 别 是 , 我 们 在 开发 环境 中 花 的 时 间 最 多 ,而且 如 果 有 什么 不 能 正常 运行 了 也 没关系 ; 出 问题 
了 我 们 就 修正 ， 其 他 人 不 会 注意 到 。 而 我 们 在 生产 环境 中 花 的 时 间 就 少 了 , 这 有 可 能 是 没有 多 少 
人 使 用 我 们 的 产品 ; 而 且 ， 如 果 有 什么 不 能 正常 运行 了 ,问题 可 就 大 了 。 下 一 章 会 介绍 在 发 布 级 
别 的 环境 中 减缓 问题 严重 性 和 监控 问题 的 措施 。 

在 开发 环境 中 使 用 构建 优先 原则 有 很 多 好 处 , 这 是 本 章 内 容 的 重点 。 我 们 会 介绍 在 开发 过 程 
中 一 些 特别 有 用 的 工具 和 机 制 , 不 过 现在 我 先 卖 个 关子 ， 先 来 讨论 配置 。 我 们 会 介绍 如 何 使 用 合 
理 的 方式 管理 、 读 取 和 存储 环境 层面 配置 中 的 敏感 数据 ， 不 向 潜在 的 攻击 者 暴露 机 密 信息 。 


3.2 配置 环境 


现在 我 们 知道 了 , 把 敏感 配置 以 纯 文本 形式 提交 到 代码 仓库 中 有 安全 风险 。 本 节 我 们 会 介绍 
如 何 管理 使 用 文件 、 数 据 库 或 内 存 等 不 同方 式 存储 的 配置 。 与 此 同时 ,我 们 还 会 探索 保护 配置 数 
据 的 不 同方 式 。 请 注意 , 我 要 介绍 的 知识 不 局 限于 只 能 在 Node.js 中 使 用 。 我 选择 这 个 平台 不 只 是 
因为 我 要 通过 实例 说 明 如 何 配 置 环境 层面 的 变量 ,还 因为 这 是 一 本 关于 JavaScript 的 书 。 话 虽 如 此 ， 
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我 们 要 讨论 的 环境 配置 方式 适用 于 任何 服务 器 端 平台 。 





环境 专用 的 变量 

应 用 在 不 同 的 环境 中 运行 , 使 用 的 环境 配置 也 不 同 。 例如 ,你 可 能 需要 配置 用 于 发 送 电 子 
邮件 的 变量 ， 而 且 在 调试 环境 中 可 能 需要 提供 一 个 选项 ， 把 所 有 电子 邮件 都 发 到 同一 个 账户 。 
我 们 使 用 的 API， 其 密 钥 通常 在 各 环境 中 也 有 所 不 同 。 这 些 设置 和 凭据 都 应 该 保存 在 环境 配置 
中 ， 方便 在 各 个 环境 中 作 调 整 。 





我 不 得 不 本 愧 地 承认 , 我 参与 过 的 有 些 项 目 违 背 了 这 种 配置 原则 , 直接 把 所 有 环境 的 配置 放 
在 了 代码 仓库 中 。 它们 对 开发 环境 、 过 渡 环 境 和 生产 环境 一 视 同仁 ,各 环境 的 配置 放 在 各 自 的 文 SE 
件 中 ,通过 文件 名 中 “development” 这 样 的 字眼 区 分 这 些 文件 适用 于 哪个 环境 。 这样 做 不 好 ， 因 
为 有 以 下 几 个 问题 。 
D 首先 ， 我 一 直 强调 ， 不 能 把 线 上 环境 使 用 的 凭据 直接 放 在 代码 仓库 中 。 这 种 数据 一 定 要 
放 在 环境 层面 的 配置 中 。 
D 其 次 ， 不 应 该 在 每 个 环境 中 重复 配置 ， 在 多 个 不 同 的 文件 中 维护 相同 的 值 ， 因 为 这 样 做 
会 导致 代码 中 有 重复 。 如 果 想 添加 新 环境 ， 或 者 给 应 用 添加 新 配置 ， 这 种 方式 不 灵 便 。 
我 还 参与 过 不 厌 其 烦 手动 配置 的 项 目 ; 获得 全 新 的 代码 基 后 ,到 处 询问 一 些 凭据 ， 并 把 它们 
保存 到 一 个 配置 文件 中 。 部 署 时 ,我 还 要 手动 修改 这 些 配置 ， 改 成 能 满足 目标 环境 的 值 。 前 一 种 
方式 至 少 不 用 每 次 切换 环境 时 都 修改 配置 才能 让 应 用 运行 起 来 ， 只 要 修改 一 个 魔法 值 ， 改 成 
“staging” 这 样 的 值 就 行 了 。 
使 用 那 种 方式 如 何 才能 做 到 不 把 所 有 信息 分 享 给 所 有 人 呢 ? 你 可 能 觉得 这 不 是 什么 大 问题 ， 
又 不 会 马上 开源 自己 的 项 目 。 如 果 你 这 么 想 就 完全 没有 抓 住 要 点 。 让 所 有 人 都 能 获取 生产 环境 使 
用 的 潜在 敏感 信息 不 是 好 的 做 法 ， 而 且 也 没有 理由 这 么 做 _ ”那些 配置 就 只 属于 那个 环境 。 




























































































开源 软件 

参与 开源 项 目的 经 验 让 我 学 到 了 很 多 技术 和 措施 , 大 大 改善 了 我 保护 敏感 数据 的 方式 。 我 
强烈 建议 你 也 尝试 参与 开源 项 目 。 我 开始 问 自己 一 些 类 似 “ 如 果 陌 生 人 下 载 了 我 的 代码 怎么 办 ” 
的 问题 ， 把 代码 推送 到 仓库 时 ， 我 能 更 加 确定 哪些 可 以 放 到 仓库 中 ， 而 哪些 不 可 以 。 














下 面 开始 讨论 如 何 配 置 环境 。 首 先 , 我 们 会 先 介 绍 瀑布 式 配 置 法 ,然后 再 介绍 保护 配置 的 不 
同方 式 一 一 加 密 和 使 用 环境 变量 。 


3.2.1 瀑布 式 存储 配置 的 方法 


瀑布 式 是 存储 配置 的 一 种 方法 。 使 用 这 种 方法 存储 的 配置 是 基于 优先 级 的 , 合并 配置 时 用 来 
决定 各 配置 的 重要 性 顺序 。 瀑 布 式 很 有 用 ,， 它 把 配置 放 在 不 同 的 地 方 , 但 这 些 配置 仍 是 整体 的 一 
部 分 。 以 下 列举 了 一 些 能 存储 配置 的 地 方 。 
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口 纯 文 本 ， 直 接 放 在 代码 基 中 。 这 种 方式 只 能 存储 不 危及 安全 的 数据 。 

口 保存 在 加 密 文件 中 。 用 于 安全 分 发 配置 。 

口 设备 级 设置 操作 系统 的 环境 变量 。 

口 进程 级 ， 把 命令 行 参数 传 给 应 用 。 
记 住 , 不 管 在 什么 层级 配置 ,配置 的 都 是 环境 。 因 此 , 应 用 必须 在 一 个 地 方 统一 从 所 有 配置 

源 读 取 配 置 。 而 且 ， 读 取 配 置 时 要 小 心 判断 哪 个 源 的 优先 级 最 高 。 在 上 述 列表 中 ,我 按照 从 低 到 

高 的 优先 级 列 出 了 一 些 可 能 的 配置 源 。 例 如 ,命令 行 参数 中 设置 的 端口 号 会 覆 写 代码 仓库 里 纯 文 

本 文件 中 存储 的 端口 号 。 
很 明显 ， 上 述 列 表 并 未 列 出 所 有 能 存储 配置 的 地 方 ， 不 过 也 为 各 种 应 用 提供 了 很 好 的 参考 。 

我 个 人 非常 反对 使 用 纯 文本 存储 配置 ， 不 过 使 用 JSON 格 式 的 纯 文本 文件 设置 一 些 基 础 配置 是 可 

以 的 ， 比 如 配置 环境 名 和 端口 号 。 我 们 可 以 把 这 个 文件 命名 为 defaults.json: 


{ 



















































































"NODE_ENV": "development", 
"PORT": 80 
} 


只 要 配置 是 纯 文本 ,这 种 方式 就 完全 合理 。 我 建议 再 创建 一 个 纯 文 本 文件 ， 可 以 将 其 命名 为 
user.json， 用 来 存储 你 可 能 想 使 用 的 个 人 配置 ， 这 样 就 不 必修 改 默 认 值 了 。 需 要 快速 测试 不 同 的 
配置 时 ， 也 能 用 到 user.json 文 件 : 

{ 











"PORT": 3000 
. 


只 要 加 密 了 这 些 纯 文本 文件 ， 就 能 将 其 签 人 源码 控制 系统 。 我 支持 使 用 这 种 方式 在 开发 者 之 
间 分 享 默认 的 环境 配置 ， 因 为 修改 默认 值 后 不 用 每 次 都 重新 分 发 一 个 JSON 文 件 。 只 要 分 发 过 一 次 
用 于 解密 文件 的 密 钥 , 修改 配置 后 只 需 将 其 签 人 源码 控制 系统 , 开发 者 就 能 使 用 已 有 的 密 钥 解密 。 

提醒 一 下 , 为 了 尽量 提高 安全 性 ,应 该 使 用 不 同 的 密 钥 加 密 不 同 的 配置 文件 。 这 样 做 至 关 重 
要 , 尤其 是 当 各 个 环境 使 用 各 自 的 配置 文件 时 ， 因 为 就 算 泄 露 了 某 个 密 钥 ， 也 不 会 影响 到 其 他 环 
境 。 而 且 ， 只 在 一 个 地 方 使 用 也 更 容易 更 换 密 钥 。 

在 环境 之 间 安 全 分 发 配置 的 方式 有 多 种 ， 接 下 来 我 们 会 介绍 其 中 几 种 。 第 一 种 是 加 密 , 我 们 
会 通过 一 个 实例 讲解 安全 加 密 配 置 文件 的 过 程 。 第 二 种 方式 不 把 环境 配置 文件 放 在 代码 基 中 , 只 
在 目标 环境 中 存储 配置 。 下 面 先 看 加 密 方式 。 


3.2.2 ”通过 加 密 增强 环境 配置 的 安全 性 
为 了 能 在 代码 基 中 安全 存储 配置 ,我 们 要 采取 一 些 安全 措施 。 首 先 , 不 能 把 解密 后 的 配置 提 
交 到 源码 控制 系统 里 ， 因 为 这 样 就 完全 失去 了 加 密 的 意义 。 用 于 加 密 的 密 钥 也 是 一 样 ， 应 该 放 在 


安全 的 地 方 ， 最 好 放 在 能 随时 获取 的 地 方 , 例如 放 在 USB 移 动 存储 器 中 。 在 源码 仓库 中 应 该 分 享 
的 是 加 密 后 的 配置 文件 ， 以 及 简单 的 命令 行 工 具 ， 用 来 解密 或 更 新 加 密 的 配置 文件 。 图 3-3 说 明 
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了 这 个 流程 。 
加 密 流程 
安全 性 方 
包含 敏感 信 私 钥 *# 加 密 后 的 文档 版 本 控制 系统 
息 的 文档 * 
i 全 = 10010001100110 
密令 、 11011001100011 
库 连 接 字符 串 、 一 个 文档 01000000101101 ， 
日 志 详 细 程度 等 人 1010011 (alt He Syn 
ee NU_ 把 加 密 后 的 文档 纳入 版 本 
外 控制 系统 
解密 流程 后 帮 雇 关 各 
po be 更 新 配置 时 重复 加 密 流程 
加 密 后 的 文档 私 钥 * 包含 敏感 信 环境 
息 的 文档 * 
10010001100110 (个 mw | .| API 密 令 、 数 据 | | 
11011001100011 库 连 接 字符 串 、 
01000000101101 (一 个 文档 日 志 详 细 程度 等 
1010011 用 一 个 ) 区 
* 不 纳入 版 本 控制 系统 用 于 配置 和 运行 应 用 





























图 3-3 ”使 用 RSA 密 钥 加 密 和 解密 配置 的 流程 


为 此 ， 我 们 可 以 创建 几 个 文件 夹 。 例 如 ， 在 env/private 文 件 夹 中 保存 解密 后 的 不 安全 数据 ， 
在 env/secure 文 件 夹 中 保存 加 密 后 的 文件 。 因 为 env/private 文 件 夹 中 包含 敏感 数据 ， 所 以 不 能 纳入 
源码 控制 系统 。 我 们 应 该 使 用 其 他 方式 分 发 密 钥 , 例如 把 存储 密 钥 的 USB 随 身 存储 器 提供 给 各 相 
关 方 。 然 后 ， 在 源码 仓库 中 提供 加 密 和 解密 的 工具 ( 这 里 可 以 使 用 Grunt 任 务 )， 使 用 相应 的 RSA 
(一 种 加 密 算法 ) 密 钥 加 密 和 解密 各 个 文件 。 加 密 时 要 用 到 三 个 Grunt 任 务 ， 一 个 用 来 生成 私 钥 ， 
其 他 两 个 使 用 这 个 私 钥 加 密 和 解密 配置 文件 。 





























RSA 加 密 示例 

在 本 书 的 配套 源码 中 有 一 个 完全 可 用 的 示例 ， 保 存在 ch03/02 rsa-config-encryption 文 件 夹 
里 。 "这 个 示例 用 到 了 我 编写 的 grunt-pemcrypt 包 ， 这 个 包 提供 了 用 于 安全 加 密 和 解密 配置 
文件 的 任务 。 我 们 不 会 深入 分 析 代 码 本 身 ， 因 为 代码 写 得 很 直观 ， 而 且 有 恰当 的 注释 。 





@ 网 上 有 这 个 代码 示例 ， 地 址 是 http:/Vbevacqua.io/bflsecure-config。 
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RSA 加 密 的 过 程 概括 如 下 。 
口 创建 私 钥 。 这 个 私 钥 不 能 分 享 给 任何 人 。 
口 使 用 这 个 私 钥 加 密 包 含 敏感 信息 的 文件 。 
口 把 加 密 后 的 文件 保存 在 代码 基 中 。 
口 需要 更 新 这 个 文件 时 ， 先 更 新 原始 文件 ， 然 后 再 加 密 。 
口 复制 代码 基 的 人 无 法 获取 加 密 后 的 配置 ， 除 非 你 把 私 钥 给 他 们 。 
下 一 节 介 绍 另 一 种 环境 配置 方法 的 优 缺 点 。 这 种 方式 不 加 密 环 境 层 面 的 配置 , 也 不 和 应 用 代 
码 仓库 里 的 其 他 内 容 一 起 分 发 环境 配置 (以 及 其 他 敏感 信息 )。 


3.2.3 ”使 用 系统 级 方式 设置 环境 层面 的 配置 


说 到 发 布 环 境 ( 过 渡 环 境 、 生 产 环 境 及 介 平 二 者 之 间 的 其 他 环境 )， 你 或 许 想 直接 在 环境 中 
配置 敏感 的 信息 , 而 不 放 在 代码 基 里 。 不 把 配置 放 在 代码 基 中 , 修改 配置 后 就 无 需 完全 重新 部 署 。 
使 用 系统 级 环境 变量 是 直接 在 环境 中 配置 的 好 方法 。 

这 种 方法 是 我 在 使 用 基于 云 的 托管 方案 (例如 Heroku ) 时 学 会 的 , 设置 起 来 很 方便 。 使 用 环 
境 变量 还 有 一 个 额外 的 好 处 : 无 需 修改 代码 基 就 能 改变 应 用 的 行为 。 这 种 方式 和 前 一 种 一 样 有 个 
缺点 , 首次 复制 代码 仓库 后 不 能 获得 大 部 分 配置 。 不 过 ,这 不 包含 你 可 能 设置 的 无 需 保护 的 默认 
值 ， 例 如 开发 环境 的 监听 端口 。 然 而 ， 这 个 缺点 恰好 迎合 了 使 用 这 种 方式 的 目的 : 全 新 复制 的 仓 
库 未 经 配置 不 能 部 署 到 生产 环境 。 

使 用 加 密 的 文件 存储 配置 和 使 用 系统 级 环境 变量 配置 之 间 的 区 别 是 , 在 代码 基 中 不 分 享 任何 
配置 〈 就 算 已 经 加 密 ) 会 更 安全 。 不 过 ， 使 用 环境 变量 有 个 缺点 : 你 仍然 需要 把 配置 放 在 那儿 。 

下 一 章 会 介绍 云端 平台 即 服务 (Platform as a Service , 简称 PaaS ) 托 管 商 一 一 Heroku。 在 Heroku 
中 只 需 执行 git push 命 令 就 能 把 应 用 部 署 到 云端 。Heroku 使 用 环境 变量 配置 环境 ， 而 且 他 们 对 
其 思想 (关于 Web 应 用 的 构建 、 架 构 和 伸缩 性 ) 作 了 细致 说 明 ， 发 布 在 了 12Factornet" 上， 每 个 
人 都 应 该 读 读 。 

在 本 地 开发 时 ， 仍 然 是 使 用 一 个 JSON 文 件 存 储 配 置 ， 这 个 文件 不 纳入 源码 控制 系统 ， 其 内 
容 和 前 一 节 提 到 的 JSON 文 件 的 内 容 一 样 。 下 面 是 这 个 JSON 环 境 配 置 文件 的 内 容 示例 : 

"NODE_ENV": "development", 

"PORT": 8080, 
"SOME_API_SECRET": "ZE1INMDDIqkzDbSDX4fS5acCpllkOW9", 


"SOME_API_KEY": "IYOxBMFi34Rkzce7kY4nhn0GqaI" 
} 


如 果 你 想 把 本 地 使 用 的 环境 配置 文件 提供 给 新 加 入 项 目的 贡献 者 , 应 该 使 用 加 密 方式 加 密 那 
个 文件 (包含 开发 环境 的 配置 ); 在 主机 环境 (不 在 开发 所 用 设备 中 的 环境 ) 中 应 该 使 用 环境 变 


量 ， 尽 量 提 高 安全 性 。 
























































































































































































































































GD 12 Factor 对 如 何 开 发 稳定 的 应 用 作 了 极 好 的 说 明 ， 其 网 址 是 http://bevacqua.io/bf/12factor。 
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在 主机 环境 中 (例如 过 渡 环 境 和 生产 环境 )， 要 使 用 不 同 的 方式 。Heroku 提 供 了 一 个 命令 行 
界面 ， 简 化 了 设置 环境 变量 的 操作 。 "在 下 面 的 示例 中 ， 我 们 把 环境 设 为 staging (过 渡 环 境 )， 
所 以 代码 会 调整 应 用 在 这 个 环境 中 的 表现 , 例如 增加 日 志 的 详细 程度 , 不 过 大 部 分 配置 还 是 跟 生 
产 环境 一 样 : 

heroku config:add NODE_ENV=staging 

命令 行 中 的 设置 应 该 最 终 确定 配置 的 值 ,以 便 能 轻松 地 对 环境 做 些小 改动 , 例如 设置 端口 或 
执行 模式 ( 调试 或 发 布 )。 以 下 示例 覆盖 了 使 用 的 端口 和 环境 : 

NODE_ENV=production PORT=3000 node app.js- 

最 后 , 我 们 来 看 一 下 如 何 使 用 合理 的 方式 合并 不 同 的 配置 源 ( 环境 变量 , 文本 文件 和 命令 行 
参数 )。 


3.2.4 ”在 代码 中 使 用 瀑布 式 方法 合并 配置 


现在 我 们 要 使 用 JavaScript 代 码 实现 上 述 配置 方式 。 我 们 不 必 写 太 多 代码 ,就 能 实现 上 述 配 置 。 

有 个 npm 模 块 ， 名 为 nconf， 能 把 不 同 源 里 的 配置 合并 到 一 起 ， 而 且 不 用 管 使 用 的 方式 是 什 
么 一 -JSON 文 件 、JavaScript 对 象 、 环 境 变量 、 进 程 参 数 等 都 行 。 下 列 代 码 示例 ( 在 本 书 配 套 源 
码 的 ch03/03_merging-config 文 件 夹 中 ) 展示 了 如 何 配置 nconf, 让 它 使 用 3.2.2 节 中 的 JSON 纯 文本 
文件 。 注 意 ， 在 这 个 代码 清单 中 ， 配 置 源 的 顺序 看 起 来 可 能 不 直观 。nconf 采 用 的 排序 方式 是 ， 
谁 在 前 面 谁 的 优先 级 高 : 


Var nconf = require('nconf'); 





















































nconf .argv (); 
nconf .env(); 
nconf.file('dev', 'development.json'); 


module.exports = nconf.get.bind(nconf); 


设置 好 这 个 模块 后 , 可 以 通过 它 从 任何 配置 源 中 获取 配置 值 , 而且 按照 各 源 出 现 的 顺序 获取 。 

口 首先 , nconf .argv () 把 命令 行 参数 的 优先 级 排 在 第 一 位 ,因为 这 是 添加 的 第 一 个 源 。 例 
如 ， 执 行 nodqe app --PORT 80 命 令 运 行 应 用 时 ， 表 明 要 把 PoRT 变 量 的 值 设 为 这 里 指定 
的 值 ， 而 不 管 其 他 源 配 置 的 是 什么 值 。 

口 nconf .env () 这 行 代码 告 诉 nconf 再 从 环境 变量 中 读 取 配置 。 例 如， 执行 PORT=80 node 
app 命 令 会 把 端口 设 为 80， 而 执行 PORT=80 node app --PORT 3000 命 令 会 把 端口 设 为 
3000， 因 为 命令 行 参数 的 优先 级 比 环境 变量 高 。 

口 最 后 ，nconf.file() 这 行 代 码 加 载 一 个 JSON 文 件 ， 读 取 最 不 重要 的 配置 : 这 个 文件 中 
的 配置 会 被 环境 变量 和 命令 行 参数 覆盖 。 如 果 在 命令 行 参 数 中 指定 了 - -PORT 80， 就 不 
管 这 个 JSON 文 件 中 的 "PoRT" : 3000 了 ， 使 用 的 端口 仍 是 80。 本 书 的 配套 源码 中 有 完整 

















































































































关于 如 何在 Heroku 中 配置 Node.js 环 境 的 说 明 ， 请 访问 http://bevacqua.io/bf/heroku-cli 来 查看 。 
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的 示例 ,而 且 详 细 说 明了 在 Heroku 中 如 何 使 用 nconf。 这 些 示例 在 下 一 章 十 分 有 用 ,所 以 
我 建议 你 先 读 完 本 章 ， 然 后 再 看 这 个 代码 示例 。 
现在 , 我 们 已 经 知道 如 何 正 确 配置 构建 过 程 和 环境 了 。 接 下 来 的 两 节 首先 介绍 首次 设置 环境 
的 一 些 最 佳 实践 ， 然 后 再 介绍 持续 开发 。 


3.3 自动 执行 繁琐 的 首次 设置 任务 


首次 架设 环境 时 , 你 要 思考 自己 在 做 什么 , 还 要 上 自动 执行 可 以 自动 执行 的 任务 。 原 因 是 ,如 
果 不 自 动 执行 ， 新 成 员 要 做 的 事情 会 越 来 越 多 。 还 有 一 个 原因 是 ， 我 们 完全 可 以 这 么 做 。 

项 目 伊始 , 我们 可 以 一 点 一 点 实现 自动 化 ， 这 很 简单 ; 不 过 ， 随 着 项 目的 开发 ， 自 动 化 会 变 
成 一 项 艰巨 的 任务 ,很 难 实现 。 此 时 ,你 的 同事 可 能 会 反对 这 么 做 ,结果 是 ,架设 工作 环境 可 能 
需要 长 达 一 周 的 时 间 。 以 前 我 在 一 个 特别 大 型 的 项 目 中 遇 到 过 这 种 情况 , 可 是 管理 人 员 却 觉得 这 
没什么 。 架 设 本 地 开发 环境 时 ， 我 通常 要 做 下 面 这 些 事情 : 

口 通读 大 量 写 得 很 差 的 维基 文章 ; 

口 手动 安装 依赖 ; 

口 手动 更 新 数据 库 模 式 ; 

口 每 天 早上 获取 最 新 代码 后 手动 更 新 模式 ; 

口 安装 音频 解码 器 ， 甚 至 还 要 安装 专用 软件 ， 例 如 特定 版 本 的 Windows 媒 体 播放 器 。 

一 周 后 我 终于 架 好 了 算是 能 用 的 环境 。 三 周 后 我 换 了 一 份 工作 , 因为 实在 无 法 忍受 这 个 项 目 
费力 的 手动 操作 。 这 个 项 目 真正 的 问题 是 难以 改变 构建 应 用 的 方式 。 不 能 直接 有 效 地 自动 完成 架 
设 新 环境 的 操作 完全 是 在 浪费 时 间 。 项 目 已 经 变 得 很 复杂 ， 让 人 根本 不 想 去 改变 这 种 现状 。 这 段 
受挫 的 经 历 是 促使 我 提出 构建 优先 原则 的 根本 动因 之 一 。 本 书 阐 述 的 正 是 这 种 面向 构建 的 方式 。 
我 们 在 第 2 章 介 绍 了 如 何 自动 执行 构建 过 程 ， 还 讲解 了 如 何 自动 创建 、 填 充 和 更 新 MySQL 数 
据 库 实例 (相应 的 任务 在 本 书 配 套 源码 的 ch02/10_mysql-tasks 文 件 夹 中 )。 "从 示例 代码 可 以 看 出 ， 
数据 库 填 充 操作 设置 起 来 很 复杂 , 但 也 不 无 好 处 : 这 样 就 只 需 把 代码 仓库 提供 给 新 协作 者 ,再 配 
上 一 些 安装 说 明 ， 告 诉 他 们 执行 一 个 Grunt 任 务 即 可 。 

我 们 已 经 充分 讨论 了 配置 方面 的 措施 ,了解 了 架设 新 开发 环境 时 只 要 有 解密 密 钥 ( 安全 地 存 
在 某 处 )， 再 运行 一 个 Grunt 任 务 就 行 了 。 首 次 设置 所 做 的 工作 不 应 该 比 配置 环境 要 做 的 多 ,也 就 
是 说 ， 应 该 会 很 容易 。 

目前 我 们 已 经 介绍 了 环境 、 构 建 模式 、 配 置 和 自动 化 ,还 介绍 了 繁琐 的 首次 设置 ， 下 面 该 介 
绍 本 音 开 头 提 到 的 持续 开发 了 。 


3.4 “在 持续 开发 环境 中 工作 
持续 开发 的 意思 是 在 代码 基 中 能 不 间断 地 工作 。 我 所 说 的 间断 不 是 指 烦人 的 项 目 经 理 过 来 询 














































































































































































































G@ 网 上 有 这 些 配 置 数据 库 的 任务 示例 ， 地 址 是 http://bevacqua.io/bf/db-tasks。 
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问 你 的 进度 , 也 不 是 指 同事 遇 到 无 法 查 出 原因 的 缺陷 时 向 你 寻求 帮助 ， 而 是 指 不 断 耗 费 工 作 时 间 
的 重复 操作 ， 例 如 每 次 修改 应 用 后 都 要 重新 执行 hode 命 令 。 现 在 我 们 已 经 有 了 构建 过 程 ， 每 次 
修改 文件 后 是 不 是 还 要 自己 手动 执行 任务 呢 ? 这 是 不 可 取 的 , 我 们 没有 时 间 去 执行 这 些 任务 。 我 
们 要 使 用 另 一 个 任务 来 自动 执行 。 

还 有 一 些小 操作 ,例如 保存 改动 然后 刷新 浏览 器 ,也 要 使 用 这 个 任务 自动 执行 。 使 用 构建 优 
先 原则 开发 时 不 能 有 太 多 的 重复 性 操作 。 我们 来 看 一 下 使 用 自动 化 技术 能 从 工作 流程 中 省 去 多 少 
重复 性 的 操作 。 这 么 做 不 是 为 了 证 明 一 切 都 能 自动 化 ,而 是 为 了 节省 时 间 , 把 更 多 的 时 间 用 在 值 
得 花 时 间 去 做 的 事情 上 ， 即 思考 和 编写 代码 。 

为 此 , 首先 我 们 要 保证 有 一 个 好 的 监视 系统 (让 你 所 用 的 任务 运行 程序 执行 一 个 监视 任务 )， 
以 便 每 次 保存 有 改动 的 文件 后 重新 执行 构建 过 程 。 


3.4.1 监视 变动 ， 争 分 夺 秒 


你 可 能 和 我 一 样 , 每 隔 几 秒 就 要 保存 文件 或 切换 标签 页 。 我 们 不 可 能 每 次 修改 注释 或 逗号 后 
都 完全 重新 构建 , 这 样 非常 浪费 时 间 。 不 过 , 有 很 多 人 会 这 样 做 , 因为 他 们 没有 找到 更 好 的 方法 。 
但 现在 你 读 到 了 这 本 书 ， 这 可 以 让 你 领先 别人 一 步 了 。 

地 庸 置疑, 最 有 用 的 Grunt 插 件 之 一 是 grunt-contrib-watch。 这 个 插件 会 监视 文件 系统 中 
代码 的 改动 ， 然 后 运行 受 这 些 改动 影响 的 任务 。 只 要 改动 的 文件 影响 了 构建 任务 ,就 要 重新 执行 
对 应 的 任务 。 这 是 持续 开发 的 支柱 之 一 ， 因 为 我 们 无 需 自 己 做 任何 事 , 在 需要 时 构建 过 程 会 自动 
运行 。 我 们 来 看 一 个 简单 的 示例 : 

watch: { 

rebuild: { 
tasks: ['build:debug'], 
files: ['public/**/*'] 
} 
} 


这 个 示例 在 本 书 配 套 源 码 的 ch03/04_watch-task 文 件 夹 中 。 这 样 配置 后 ， 只 要 public 文 件 夹 
中 有 文件 的 内 容 发 生变 化 或 者 创建 了 新 文件 ,就 会 重新 执行 整个 构建 过 程 。 现 在 , 我们 无 需 不 断 
重复 运行 构建 过 程 ， 它 会 自动 运行 。 

不 过 , 这 种 方式 不 是 最 有 效 的 ,因为 就 算 修改 的 文件 对 某 些 任务 没 影响 ,也 会 运行 所 有 构建 
任务 。 例 如 ， 编 辑 LESS 文 件 后 ， 会 运行 所 有 JavaScript 相 关 的 任务 ， 例 如 jshint ， 因 为 这 些 任务 
也 是 构建 的 一 部 分 。 为 了 纠正 这 一 行为 ,我 们 应 该 把 watch 任 务 分 成 多 个 目标 ， 一 个 目标 对 应 一 
个 会 受 文件 内 容 变 动 影响 的 构建 任务 。 下 列 代 码 清单 简单 演示 了 我 说 的 这 种 做 法 。 


代码 清单 3.2 ”把 watch 任 务 分 成 多 个 目标 







































































watch: { 
less: { 
tasks: ['less:debug'], 
files: ['public/css/**/*.less'] 


把 
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intb liedte 
tasks: ['jshint:client'], 
files: ['public/js/**/*.,.js"] 

j 

lint_server: { 
tasks: ['jshint:server'], 
tileSD LL SE] 

3 

} 


像 这 样 细 化 监视 任务 看 起 来 可 能 有 些 繁琐 , 但 绝对 值得 这 么 做 。 这么 做 能 提升 持续 开发 流程 
的 速度 ， 因 为 此 时 只 会 构建 有 变化 的 文件 , 而 不 是 每 次 都 盲目 地 重新 构建 所 有 文件 。 本 书 的 配套 
源码 中 有 完整 可 用 的 代码 ， 在 ch03/ 05_better-watch-closely 文 件 夹 中 。? 

在 构建 中 监视 这 种 变动 固然 很 好 , 不 过 , 能 不 能 在 此 基础 上 监视 整个 Node 应 用 的 变动 呢 ” 当 
然 可 以 ， 而 且 应 该 这 么 做 。 下 面 我 们 来 介绍 hodemon。 











3.4.2 ”监视 Node 应 用 的 变动 


在 持续 开发 领域 ， 我 们 要 尽量 做 到 不 重复 执行 任何 操作 ， 遵 守 DRY 原 则 ， 握 弃 WET。 我 们 
刚刚 看 到 了 这 人 么 做 的 好 处 : 无 需 每 次 改动 文件 后 都 运行 构建 过 程 。 现 在 , 我们 要 在 Node 应 用 中 使 
用 同样 省 事 的 方法 。 

nodemon 命 令 的 作用 和 nogde 命 令 一 样 , 不 过 nodemon 会 监视 变动 并 重启 应 用 , 不 用 自己 手动 
重新 执行 hode 命 令 。nodemon 使 用 npm 安 装 ， 而 且 要 指定 -go 修 饰 符 , 全 局 安装 ， 以 便 在 命令 行 中 
调用 : 

npm install -g nodemon 

安装 后 ， 我 们 不 再 执行 node app .js 命令 ， 而 是 执行 wodemon app.js 命 令 。 默 认 情况 下 ， 
nodemon 会 监视 所 有 *.js 文 件 ， 不 过 我 们 可 以 进一步 限制 要 监视 的 文件 。 为 此 ， 我 们 可 以 提供 一 
个 .nodemonignore 文 件 ， 这 个 文件 和 .gitignore 文 件 的 作用 类 似 ， 用 于 忽略 不 想 让 nodemon 监 视 的 
文件 。 下 面 是 一 个 示例 : 


# 第 三 方 包 
./node_ modules/* 












































# 构建 的 中 间 产 物 
/DLn/A* 


# 和 急 略 客户 韶 JavaScript 
./Ssrc/client/* 


# 忽略 测试 
/test/* 


人 们 普遍 认为 ， 在 不 同 的 终端 窗口 里 分 别 运 行 grunt watch 和 nodemon app.js， 比 都 使 用 





Q@ 网 上 有 这 个 代码 示例 ， 地 址 是 http://bevacqua.io/bf/watch-out。 
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Grunt 运 行 的 速度 要 稍微 快 一 些 ， 因 为 Grunt 有 额外 的 消耗 。 不 过 ， 只 运行 一 个 命令 更 方便 ， 这 样 不 
用 打开 两 个 终端 窗口 ， 因 此 可 能 会 抵消 Grunt 引 发 的 额外 消耗 。 一 般 来 说 ， 你 可 以 在 速度 (分开 运 
行 ) 和 便利 性 (都 使 用 Grunt 运 行 ) 之 间 自 行 权衡 。 我 个 人 倾向 于 便利 性 ， 不 想 多 执行 一 个 命令 。 
下 面 我 们 分 析 如 何 把 nodemon 集 成 到 Grunt 中 。 
把 watch 任 务 和 nodemon 命 令 结合 在 一 起 
把 nodemon 集 成 到 Grunt 之 前 有 一 个 问题 要 解决 : noqemon 和 watch 都 是 阻塞 型 任务 , 它们 会 
一 直 无 休止 地 运行 ， 监 视 代 码 的 变化 。 但 Grunt 是 按照 顺序 执行 任务 的 ， 一 个 任务 运行 完毕 后 才 
会 运行 另 一 个 任务 。 因 此 ， 如 果 nodqemon 和 watch 中 有 一 个 没 结束 ， 另 一 个 就 不 会 开始 运行 。 
为 了 解决 这 个 问题 , 我 们 可 以 使 用 grunt-concurrent 包 , 这 个 插件 会 为 指定 的 每 个 任务 派 
生 一 个 新 进程 ， 因 此 并 不 会 为 你 省 多 少 事 。 使 用 grunt -nodemon 包 能 轻易 地 让 Grunt 运 行 


nodemon。 下 列 代码 清单 是 个 示例 : 


代码 清单 3.3 ”让 Grunt 运 行 hodemon 
nodemon: { 
dev: { 
SOTIDBt “appBsJje, 
} 















































} 
concurrent: { 
dev: { 
tasks: ['nodemon', 'watch'] 
} 
} 


本 书 的 配套 源码 中 也 有 这 个 示例 ， 在 第 3 章 的 06_nodemon 文 件 夹 中 。 本 节 我 们 介绍 了 如 何 改 
进 执行 任务 的 先后 顺序 ， 这 让 我 们 能 正常 监视 变动 了 ,但 是 仍然 要 手动 保存 。 
下 面 我 们 简要 介绍 一 下 保存 变动 。 


3.4.3 选择 一 款 合适 的 文本 编辑 器 


选择 一 款 合适 的 编辑 器 对 日 常 工作 的 效率 来 说 至 关 重 要 , 效率 高 了 幸福 感 就 会 油 然 而 生 。 花 
点 时 间 学 习 一 下 你 选择 的 编辑 器 的 各 种 功能 吧 。 第 一 次 在 YouTube 上 观看 介绍 文本 编辑 咒 快 捷 键 
的 视频 时 ,你 可 能 觉得 自己 像 书 果子 一 样 , 但 这 些 时 间 花 得 绝对 值 。 你 一 天 中 大 部 分 时 间 都 是 在 
使 用 编辑 代码 的 工具 ， 因 此 你 可 能 还 要 学 习 如 何 使 用 这 些 编辑 器 提供 的 各 种 功能 。 

幸好 大 多 数 编辑 器 都 提供 了 自动 保存 功能 。 刚 开始 你 可 能 觉得 这 是 个 奇怪 的 功能 , 但 习惯 
后 ， 你 会 爱 上 这 个 功能 ， 再 也 离 不 开 它 了 。 我 个 人 喜欢 使 用 Sublime Text， 这 本 书 就 是 使 用 这 个 
编辑 器 写 出 来 的 ， 而 且 大 多 数 情况 下 我 都 使 用 这 个 编辑 器 写 文章 。 如 果 你 使 用 Mac 操 作 系统 ， 
TextMate 似 乎 是 个 不 错 的 选择 。 除 此 之 外 还 有 其 他 选择 , 例如 WebStorm， 这 是 专 为 Web 开 发 打造 
的 IDE; 还 有 vim， 推 荐 敢于 挑战 大 量 使 用 快捷 键 的 复杂 用 户 界面 的 人 使 用 。 

我 提 到 的 这 几 个 编辑 器 都 有 自动 保存 功能 。 如 果 你 正在 使 用 的 编辑 器 不 能 自动 保存 , 我 强烈 
建议 你 换 用 有 这 个 功能 的 编辑 器 。 一 开始 你 可 能 觉得 不 舒服 , 但 使 用 新 编辑 器 之 后 不 久 你 就 会 感 
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激 我 了 。 
最 后 ， 我 们 来 介绍 重新 加 载 浏览 器 的 LiveReload 技 术 ， 以 及 使 用 这 个 技术 有 什么 好 处 。 





3.4.4 ”手动 刷新 浏览 器 已 经 过 时 了 


修改 代码 后 ， 我 们 都 不 想 浪费 宝贵 的 时 间 刷 新 浏览 侨 ， 而 LiveReload 技 术 恰 恰 就 是 为 解决 这 
一 问题 而 生 。LiveReload 利 用 的 是 Web 套 接 字 ， 这 是 一 项 实时 通信 技术 ( 很 棒 的 技术 )， 在 浏览 融 
中 可 用 。 使 用 Web 套 接 字 的 LiveReload 能 判断 是 否 需要 应 用 小 幅 改 动 ， 例 如 对 CSS 的 修改 ， 还 是 
修改 HTML 后 重新 加 载 整个 页 面 。 

启用 这 个 功能 的 方式 十 分 简单 ， 我 们 没有 借口 不 去 启用 。 grunt-contrib-watch 包 内 置 了 
这 个 功能 ， 因 此 只 需 在 watch 任 务 中 添加 一 个 目标 就 行 ， 如 下 列 代 码 清单 所 示 。 





























Rs 














代码 清单 3.4 ”启用 LiveReload 功 能 
watch: { 
livereload: { 
options: { 
livereload: true 
Dy 
files: [ 
UDITOAtt/t, COB. JeF 
'Views/**/*.html' 
] 
} 
} 


然后 ,我们 需要 安装 并 局 用 相应 的 浏览 器 插件 。 现 在 ,调试 应 用 时 就 无 需 再 手动 刷新 浏览 需 
了 。 本 书 的 配套 源码 中 有 一 个 现成 的 示例 ( 在 ch03/07_livereload 文 件 夹 中 ),“ 包 含 了 必要 的 设置 
说 明 ， 使 用 起 来 很 简单 。 














3.5 总结 


环境 和 开发 流程 的 速成 课 到 此 结束 了 ! 下 面 简 要 概括 本 章 介绍 的 知识 。 

口 调试 模式 和 发 布 模式 以 不 同 的 方式 影响 构建 流程 ， 调 试 模式 的 目的 是 捕获 缺陷 和 持续 开 

发 ， 在 下 一 章 你 会 看 到 ， 发 布 模式 是 为 了 监控 和 优化 速度 。 

口 配置 应 用 时 不 能 把 机 密 信 息 放 在 源码 中 ， 而 且 要 提供 一 定 的 灵活 性 ， 便 于 在 运行 应 用 的 

环境 中 配置 。 

口 我 们 介绍 了 持续 开发 , 还 介绍 了 修改 代码 后 如 何 使 用 watch 任 务 重 新 构建 应 用 , 以 及 如 何 

使 用 nogdemon 重 启 应 用 ， 最 后 还 说 明了 正确 选择 文本 编辑 工具 的 重要 性 。 
下 一 章 会 进一步 介绍 发 布 应 用 时 应 该 采取 的 性 能 优化 措施 , 什么 是 持续 集成 , 如 何 合理 使 用 

持续 集成 ， 如 何 监控 分 析 应 用 ， 以 及 如 何 把 应 用 部 署 到 过 渡 环 境 和 生产 环境 等 主机 环境 中 。 

























































































Q@ 请 使 用 http://bevacqua.io/bf/livereload 中 的 代码 示例 亲身 体验 一 下 LiveReload 功 能 。 
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第 4 章 
发 布 、 部 署 和 监控 








本 章 内 容 

口 理解 发 布 流程 和 预 部 署 任务 
口 部 署 到 Heroku 

口 使 用 持续 集成 服务 Travis 

口 理解 持续 部 署 











前 面 我 们 已 经 介绍 了 构建 过 程 和 可 能 会 执行 的 常见 构建 任务 ( 以 及 如 何 使 用 Grunt 来 执行 )， 
还 概览 了 环境 和 配置 。 此 外 ,我 们 全 面 讨论 了 开发 环境 , 但 这 只 是 整个 过 程 的 一 部 分 。 你 的 工作 
大 部 分 都 在 开发 环境 中 完成 ,然而 ,你 要 实现 的 是 整个 系统 ， 因 此 要 做 好 发 布 的 准备 ， 把 应 用 部 
团 到 一 个 平台 中 ,让 他 人 访问 ,还 要 监控 应 用 的 状态 。 我们 已 经 建立 了 构建 优先 意识 ， 所 以 我 提 
到 的 这 个 流程 要 使 用 自动 化 技术 完成 ， 避 免 重 复 和 人 为 的 错误 ， 还 要 运行 测试 。 正 如 我 在 第 1 章 
所 说 的 ， 这 样 做 都 是 为 了 节省 时 间 。 

持续 集成 ( Continuous Integration， 简 称 CI ) 平台 的 作用 是 在 主机 环境 中 确保 测试 都 能 通过 ， 
把 更 稳定 的 版 本 部 署 到 生产 环境 。 在 本 章 后 面 你 会 看 到 ,每 次 把 代码 推送 到 版 本 控制 系统 ( Version 
Control System， 简 称 VCS )，CI 都 会 测试 代码 。 自 动 构建 ( 和 持续 部 署 ) 十 分 重要 ， 有 利于 保证 
日 常 开发 多 产 高 效 。 只 要 拥有 一 套 能 轻易 执行 的 工作 流程 , 部 署 应 用 就 能 变 得 很 容易 。 相 比 之 下 ， 
手动 执行 一 系列 操作 则 显得 有 些 不 便 ， 可 能 要 花费 半 个 小 时 。 

读 完 本 章 后 , 你 将 掌握 一 套 安全 的 持续 部 署 方案 。 这 和 持续 部 署 的 理念 是 一 致 的 , 二 者 的 目 
的 都 是 为 了 减少 重复 劳动 和 人 为 错误 。 本 书 采用 的 发 布 流程 包含 以 下 几 个 步骤 。 
口 第 一 步 是 运行 发 布 模式 的 构建 过 程 。 
口 构建 完成 后 ， 要 运行 测试 ， 确 保 最 新 的 改动 没有 破坏 这 个 版 本 。 在 开发 过 程 中 要 经 常 使 
用 lint 程 序 解决 小 的 句法 问题 。 
口 如 果 测 试 通过 了 ， 可 能 要 做 些 预 部 署 操作 ， 例 如 更 新 版 本 号 和 更 改 日 志 。 
口 之 后 要 研究 部 署 方案 ,例如 云 托管 和 CI 平台 。 

图 4-1 描 述 了 这 个 推荐 的 发 布 和 部 署 流 程 。 查 看 这 幅 图 时 ， 在 心中 要 记 住 一 点 : 部 署 到 线 上 
生成 环境 之 前 ， 建 议 先 部 署 到 过 渡 环 境 ， 确 保 在 主机 环境 中 一 切 都 能 按 预期 的 运行 。 

要 学 的 知识 很 多 ， 我 们 先 讨论 发 布 和 部 署 流程 。4.2 节 会 详细 说 明 预 部 署 操作 ; 4.3 节 会 全 面 
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说 明 部 署 的 方方面面 ， 还 会 教 你 如 何 把 应 用 部 署 到 Heroku; 4.4 广 会 介绍 持续 集成 ， 以 及 CI 用 来 
代 你 执行 繁复 操作 的 一 些 工 具 。 








发 布 和 部 署 流程 
性 能 

















作为 一 个 Grunt 任 a 
务 别名 执行 ) :介绍 这 些 操作 
构建 部 署 
编译 预 部 署 操作 
优化 部 署 到 过 滤 环境 
测试 佳 版 本 部 署 到 生产 环境 


grunt build:release 






























































图 4-1 ”推荐 的 发 布 和 部 署 流 程 


4.1 ”发布 应 用 


准备 发 布 应 用 时 ， 要 使 用 一 些 Web 最 佳 实践 。 第 2 章 介 绍 了 两 个 技术 : 一 个 是 简化 ， 目 的 是 
为 得 到 更 好 的 性 能 而 压缩 资源 文件 ; 一 个 是 拼接 ， 即 把 多 个 文件 合并 在 一 起 , 减少 HTTP 请 求 数 。 
在 发 布 版 本 中 ,你 肯定 要 用 到 这 两 个 技术 。 这 两 个 技术 能 提升 Web 应 用 的 用 户 体验 ， 因 为 开发 者 
可 读 的 源码 会 打包 成 一 个 个 压缩 文件 , 提高 下 载 速 度 。 第 2 章 还 介绍 了 子 图 集 喘 射 和 子 图 集 技术 ， 
目的 是 把 多 张 图 像 整 合 到 一 个 大 文件 中 。 这 两 个 技术 也 能 在 调试 模式 中 使 用 , 原因 只 有 一 个 : 让 
调试 和 发 布 两 个 模式 联系 得 更 紧密 ， 差 异 更 少 。 如 果 不 使 用 这 两 个 技术 的 话 , 在 调试 模式 中 要 在 
CSS 中 引用 单个 图 标 ， 而 在 发 布 模式 中 要 引用 子 图 集 映 射 和 各 个 图 标的 位 置 ， 这 样 构建 流程 就 没 
有 意义 了 ,而且 有 上 自我 重复 ,违背 了 DRY 原 则 。 

除了 简化 、 拼 接 和 子 图 集 之 外 , 发 布 流程 中 还 能 使 用 什么 其 他 的 技术 呢 ? 本 闻 会 介绍 优化 图 
像 和 缓存 资源 文件 技术 , 然后 再 介绍 部 署 流 程 中 使 用 的 技术 一 一 语义 化 版 本 ,以 及 如 何 轻松 地 让 
变更 日 志保 持 在 最 新 状态 。 


4.1.1 优化 图 像 


拼接 并 简化 JavaScript 和 和 CSS 文件 并 不 能 一 劳 永 逸 , 通常 图 像 才 是 影响 网 页 下 载 时 间 的 主要 
素 ， 因 此 图 像 比 其 他 静态 资源 更 值得 优化 。 第 2 章 在 说 明 如 何 使 用 多 张 图 像 生 成 一 个 子 图 集 表 单 
时 已 经 做 了 大 量 优 化 。 生 成 子 图 集 表单 的 过 程 和 拼接 文本 文件 类 似 , 目的 是 把 多 个 文件 合并 成 一 
个 文件 。 另 一 个 优化 措施 简化 的 目的 是 把 脚本 和 样式 表 文 件 中 的 变量 名 缩短 ,从 而 减 小 文件 的 大 
小 。 除 此 之 外 ,简化 程序 还 会 做 一 些 其 他 细微 的 优化 。 对 图 像 来 说 ， 压 缩 文 件 的 方式 有 很 多 ， 压 
缩 率 在 9%~80% 之 间 ， 一般 都 大 于 50%。 幸 运 的 是 ， 某 些 Grunt 包 ( 我 们 要 熟悉 这 些 包 ) 能 代 我 们 
执行 这 种 繁复 的 操作 。 




























































































图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


4.1 发 布 应 用 61 








这 些 包 中 有 一 个 是 grunt-contrip-imagemin， 正 符合 我 们 的 需求 ， 它 能 压缩 不 同 格 式 的 
图 像 ， 例 如 PNG、GIF 和 JPG。 在 详细 介绍 这 个 包 之 前 ， 我 先 简要 介绍 图 像 优化 的 两 个 概念 : 无 
损 压缩 和 隔行 扫描 。 

1. 无 损 图 像 压缩 

无 损 图 像 压 缩 与 JavaScript 简 化 很 像 ， 作 用 是 把 图 像 的 原始 二 进 制 数据 中 不 重要 的 数据 删除 。 
无 损 压 缩 的 重点 是 不 调整 图 像 的 外 观 ， 只 修改 二 进 制 表示 。 无 损 压 缩 后 得 到 的 图 像 和 原 图 一 样 ， 
只 是 存储 空间 变 小 了 。 幸 运 的 是 , 已 经 有 充满 智慧 的 人 研究 出 了 执行 高 级 图 像 压缩 的 工具 , 我 们 
只 需 指 定 图 像 的 路 径 ， 这 些 工 具 就 能 使 用 各 自 的 算法 压缩 图 像 。 而 且 ，grunt-contrip- 
imagemin 会 使 用 正确 的 参数 配置 这 些 低层 程序 ， 无 需 我 们 手动 执行 。 注 意 ， 无 损 压 缩 移 除 的 字 
节 数 没有 有 损 压 缩 多 。 不 过 ， 如 果 不 能 接受 图 像 品 质 的 下 降 ， 使 用 无 损 压 缩 就 够 了 。 如 果 能 接受 
图 像 品 质 的 下 降 ， 则 应 该 使 用 有 损 图 像 压缩 技术 。 

2. 有 损 图 像 压 缩 

有 损 图 像 压 缩 技术 重新 编码 图 像 时 会 使 用 不 精确 的 近似 方式 ( 也 就 是 丢掉 部 分 数据 ) 泻 染 图 
像 ， 因 此 移 除 的 字 节 数 比 无 损 压缩 多 很 多 ( 最 大 压缩 率 能 达到 90% )。 无 损 压 缩 移 除 的 数据 通常 只 
是 元 数据 ， 例 如 地 理 位 置 和 相机 类 型 等 。grunt-contrib-imagemin 包 默认 使 用 有 损 压缩 ， 并 且 
会 结合 无 损 压 缩 , 移 除 不 必要 的 元 数据 。 如 果 只 想 使 用 无 损 压 缩 , 应 该 考虑 直接 使 用 imagemin 包 。 

3. 隔行 扫描 的 图 像 

我 们 要 学 习 的 另 一 种 图 像 优 化 措施 是 隔行 扫描 (interlacing ) "。 隔 行 扫描 的 图 像 比 普 通 图 像 
大 ,但 通常 情况 下 ， 这 些 增加 的 字 节 是 值得 的 ， 因 为 这 样 能 提升 感知 效果 。 虽 然 下 载 隔行 扫描 的 
图 像 所 用 的 时 间 稍 微 长 一 些 , 但 是 这 种 图 像 比 普通 图 像 演 染 得 快 。 渐进 式 图 像 的 工作 方式 正如 其 
名 所 示 ， 先 使 用 最 少 的 像素 泻 染 图 像 ， 看 起 来 大 致 和 完整 的 图 像 一 样 ， 然 后 再 渐进 增强 ( 传 给 浏 
览 絮 更 多 的 数据 )， 最 终 显示 出 完整 品质 的 图 像 。 

传统 上 , 图 像 从 上 到 下 加 载 , 品质 较为 完整 。 这 种 加 载 方式 的 下 载 速度 虽 快 , 但 感觉 却 很 慢 ， 
而 且 要 等 加 载 完 才 能 看 到 整 张 图 像 。 在 渐进 泻 染 模 式 中 ， 人 类 感知 到 的 加 载 速 度 更 快 ， 因 为 不 用 
等 这 么 长 时 间 就 能 看 到 〈 模糊 的 ) 整 张 图 像 。 

4. 设置 grunt-contrib-imagemin 

与 前 面 的 任务 一 样 ， 设 置 grunt -contripb-imagemin 也 不 难 。 记 住 ， 我 们 重点 学 习 的 是 任 
务 的 作用 ， 以 及 在 什么 时 候 如 何 执 行 任务 。 下 列 代 码 清单 配置 ， 会 在 发 布 模式 中 优化 *.jpg 图 像 。 


代码 清单 4.1 在 发 布 模式 中 优化 图 像 


imagemin: { 
release: { 
files: [{ 
expand: true, 
sre: ‘build/img/**/*. jpg' 
国际 


































































































































































































Qa 隔行 扫描 提升 感知 效果 的 详细 说 明 参 见 http://bevacqua.io/bf/interlacing。 这 个 页 面 中 还 有 一 个 动态 GIF 图 ， 生 动 展 
示 了 隔行 扫描 图 像 的 工作 方式 。 
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options: { 
progressive: true // 渐进 式 jJpg 图 像 
} 
} 
} 


我 们 在 代码 清单 4.1 中 不 用 包含 压缩 图 像 的 配置 ， 因 为 会 默认 进行 压缩 。 本 章 对 应 的 源码 中 
有 一 个 完整 可 用 的 示例 ， 在 ch04/01_image-optimization 文 件 夹 中 ， 包 含 调试 模式 和 发 布 模式 的 完 
整 构建 流程 。 现 在 ， 我 们 已 经 稍微 改善 了 Web ， 人 们 有 更 好 的 地 方 可 以 漫 无 目的 地 四 处 闲逛 了 。 
接 下 来 ， 我们 把 注意 力 转 到 缓存 静态 资源 上 。 

















4.1.2 缓存 静态 资源 


如 果 你 不 熟悉 缓存 这 个 术语 , 可 以 把 它 理解 成 复印 图 书馆 中 历史 书 的 过 程 。 如 果 不 想 每 次 都 
去 图 书馆 ， 可 以 复印 一 些 章节 带 回 家 ， 想 什么 时 候 看 就 什么 时 候 看 ， 而 不 用 再 动身 去 图 书馆 。 

Web 中 的 缓存 比 复印 从 图 书馆 借 来 的 书 要 复杂 ， 但 本 质 是 一 样 的 。 

1. Expires 首 部 

有 个 最 佳 实践 你 一 定 要 遵守 : 为 静态 资源 设 定 Expires 首 部 。 根 据 HTTP 协 议 的 规定 ， 这 个 
首部 的 作用 是 告诉 浏览 嚣 ， 如 果 至 少 访问 过 一 次 所 请 求 的 资源 ( 从 而 缓存 了 这 个 资源 )， 而 且 绥 
存 的 版 本 没有 过 期 , 就 不 要 再 次 请 求 这 个 资源 。Expires 首 部 设 定 的 过 期 日 期 决定 缓存 的 版 本 什 
么 时 候 失 效 ， 需 要 再 次 下 载 资源 。 举 个 Expires 首 部 的 示例 : Expires: Tue，25 Dec 2012 
16:00:00 GMT。 

这 种 做 法 既 棒 也 糟 。“ 棒 ”是 对 用 户 而 言 的 ， 因 为 用 户 访问 过 你 的 网 页 后 ， 就 不 需要 再 次 下 
载 浏览 器 中 已 经 有 缓存 的 资源 了 ， 这 样 就 减少 了 请 求 次 数 ， 也 节省 了 时 间 。“ 糟 ”是 对 身 为 开发 
者 的 我 们 而 言 的 ， 因 为 缓存 察觉 不 到 新 部 署 后 资源 的 变化 ， 所 以 浏览 器 也 就 不 会 重新 下 载 。 

为 了 解决 这 种 麻烦 ， 让 Expires 首 部 发 挥 作用 , 你 可 以 在 每 次 新 部 署 修改 了 静态 资源 后 重 命 
名 资源 文件 , 并 在 其 名 字 后 面 加 上 哈 希 值 ,强制 让 浏览 器 重新 下 载 文件 ， 因 为 修改 文件 名 后 得 到 
的 文件 已 经 和 浏览 器 中 缓存 的 文件 不 同 了 。 

















































































































哈 希 哈 希 值 是 计算 得 到 的 值 ， 长 度 固定 ， 以 一 种 编码 方式 表示 数据 ( 也 译作 “ 散 列 值 ”)。 上 述 
情况 使 用 的 哈 希 值 可 以 从 资源 的 内 容 或 最 后 修改 日 期 计算 得 来 。 比 如 ，a38cbf9e 就 是 个 哈 
硕 值 。 虽 然 这 个 值 看 起 来 很 随意 ， 但 计算 哈 希 值 的 过 程 不 涉及 任何 随机 性 。 如 果 在 文件 名 
后 加 上 哈 希 值 的 话 就 没 必要 使 用 Expires 首 部 了 ， 因 为 每 次 都 会 请 求 名 称 不 一 样 的 文件 。 








计算 得 到 哈 希 值 后 ， 可 以 把 哈 硕 值 作为 文件 的 请 求 字符 串 参 数 ， 例 如 /al1.js?_=a38 
cbf9e。 你 也 可 以 把 它 添加 到 文件 名 中 , 例如 /a38cbf9e.all.js。 除 此 之 外 , 还 可 以 把 哈 希 值 
赋值 给 ETrag 首 部 。 具 体 使 用 哪 种 方式 取决 于 你 的 需求 : 如 果 处 理 的 是 静态 资源 ， 例 如 JavaScript 
文件 ， 或 许 最 好 把 哈 硕 值 添加 到 文件 名 中 或 者 作为 请 求 字符 串 )， 再 设 定 Expires 首 部 ; 如 果 
处 理 的 是 动态 内 容 ， 最 好 把 ETag 首 部 的 值 设 为 哈 希 值 。 
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2. 使 用 Last-Modified 或 ETag 首 部 
ETag 首 部 是 标识 资源 特定 版 本 的 唯一 方式 。Last-Modified 首 部 的 作用 与 之 类 似 ， 用 于 标 
识 资源 的 最 后 修改 日 期 。 如 果 使 用 这 两 个 首部 中 的 任何 一 个 ， 就 应 该 在 cache-control 首 部 中 
使 用 max-age 修 饰 符 ， 而 不 能 在 Expires 首 部 中 使 用 。ETag 首 部 和 cache-control 首 部 结合 在 
一 起 形成 的 是 柔和 缓存 策略 ,让 客户 端 决定 使 用 缓存 的 副本 还 是 重新 请 求 。 以 下 示例 展示 了 如 何 
把 ETag 首 部 和 cache-Control 首 部 结合 在 一 起 使 用 : 


ETag: a38cbf9e 
Cache-Control: public, max-age=3600 


为 了 方便 起 见 ，Last-Modified 首 部 可 用 作 ETag 首 部 的 蔡 代 品 。 在 下 面 的 示例 中 ， 我 们 没 
有 设 定 唯一 标识 资源 的 ETag 首 部 ， 而 是 设 定 修改 日 期 ， 获 得 同样 的 唯一 性 : 


Last-Modified: Tue, 25 Dec 2012 16:00:00 GMT 
Cache-Control: public, max-age=3600 


下 面 我 们 看 一 下 如 何 使 用 Grunt 创 建文 件 名 中 使 用 的 哈 希 值 ， 以 及 如 何 安全 地 把 Expires 首 
部 设 为 遥远 的 未 来 日 期 。 

3. 使 用 Grunt 让 缓存 失效 

在 构建 过 程 中 ， 基 本 不 能 设 定 HITP 首 部 ， 因 为 前 面 介绍 的 首部 都 在 响应 中 ， 不 能 静态 地 确 
定 。 不过, 我 们 可 以 使 用 grunt-rev 把 哈 希 值 添加 到 资源 的 文件 名 中 。 这 个 包 会 计算 每 个 静态 资 
源 的 哈 希 值 , 然后 重 命 名 资源 文件 , 把 哈 希 值 添加 到 原来 的 文件 名 中 。 例 如 , public/js/all.js 
会 被 修改 成 public/js/1be2cd73.all.js， 其 中 1be2cd73 是 根据 a11 .js 文件 的 内 容 计 算得 
到 的 哈 希 值 。 这 个 过 程 会 导致 一 个 问题 ， 即 视图 引用 的 资源 不 对 了 ， 因 为 重 命名 后 名 字 前 面 多 了 
一 个 哈 希 值 ,我们 可 以 使 用 grunt-usemin 包 解决 这 个 问题 grunt-usemin 会 查找 HTML 和 CSS 
文件 中 引用 的 静态 资源 ， 将 其 换 成 修改 后 的 文件 名 。 我 们 要 做 的 就 这 么 多 。 相 应 的 Grunt 配 置 如 
下 列 代码 清单 所 示 (在 本 书 配套 源码 的 ch04/02_asset-hashing 文 件 夹 中 )。 


代码 清单 4.2 ”更 新 文件 名 


rev: { 
release: { 
files: { 
Sro% [build/**/% {CSS,jS.Bng}'] 
} 
} 
}s 






















































































i en 
C88 ["DUuUild/**/* CS] 
} 
注意 ， 这 两 个 任务 在 aebug 流 程 中 都 用 不 到 ， 因 为 这 些 优化 在 开发 过 程 中 没有 任何 好 处 ， 
此 最 好 把 目标 命名 为 release， 以 便 明确 地 区 分 。 不 过 , 像 上 面 这 样 编写 usemin 任 务 ， 在 Grunt 
任务 中 有 特殊 的 意义 。css 和 html 目 标 分 别 配置 想 把 哪些 CSS 和 HTML 文 件 的 名 称 修改 为 带 哈 希 
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人 码 的 文件 和 名， 而且 usemin 会 忽略 release 等 目标 。 








我 们 要 介绍 的 下 一 个 技术 涉及 在 style 标 签 中 内 机 CSS， 以 避免 请 求 CSS 文 件 时 阻塞 泻 染 ， 


从 而 让 页 面 加 载 得 更 快 。 
4.1.3 内藤 对 首 屏 至 关 重 要 的 CSS 





浏览 器 只 要 遇 到 需要 下 载 的 CSS 资 源 就 会 阻塞 泻 染 。 不 过 ， 过 去 这 些 年 我 们 都 把 CSS 放 在 页 
面 的 顶部 (在 <head> 元 素 中 )， 因 此 ， 用 户 不 会 看 到 无 样式 内 容 闪 烁 (Flash of Unstyled Content， 





简称 FOUC )。 内 巷 样 式 是 为 了 提升 页 面 的 加 载 速度 ， 同 时 也 不 破坏 用 户 体验 ， 不 让 用 户 看 到 
FOUC。 这 种 技术 只 有 在 服务 咒 端 和 客户 端 同时 泻 染 视图 〈 第 7 童 会 介绍 ) 时 才 有 效 。 

















为 了 实现 这 种 特性 ， 我 们 需要 做 下 面 几 件 事 。 





























到 onloaq 事 件 触发 之 后 ， 以 免 阻 塞 泻 染 。 














口 首先 要 找 出 哪些 是 “ 首 屏 ”使 用 的 CSS ， 即 初次 加 载 时 正确 浑 染 页 面 中 可 见 元 素 所 需 的 


口 找 出 首 屏 实际 使 用 的 样式 后 (浏览 器 需要 这 些 样式 才能 正确 泻 当 页面， 而 且 不 会 让 用 户 
看 到 FOUC )， 要 把 这 些 样式 艇 和 人 <style> 标 签 ， 放 在 页 面 的 <head> 元 素 中 。 
口 所 需 的 样式 脱 入 <style> 标 签 后 ， 我 们 就 可 以 使 用 JavaScript 把 对 CSS 样 式 表 的 请 求 延 迟 

















口 当然 ， 我 们 不 能 让 关闭 JavaScript 功 能 的 用 户 陷 和 困境， 毕竟 我 们 是 Web 世 界 的 好 公民 ， 





所 以 还 要 提供 一 个 备用 方案 一 一 在 <noscript> 标 签 中 请 求 会 阻 





塞 泻 染 的 样式 表 。 


你 可 能 发 现 了 ， 这 个 过 程 很 复杂 ， 而 且 容 易 出 错 ， 就 像 第 1 章 的 案例 一 样 ， 骑 士 资 本 公司 因 
为 人 为 错误 而 损失 了 五 亿美 元 。 对 我 们 来 说 ， 如 果 什 么 地 方 出 错 了 ,后 果 可 能 不 会 那么 严重 , 但 








仍然 十 分 有 必要 自动 执行 这 个 过 程 ， 因 为 每 次 修改 样式 或 标记 后 要 做 的 





下 面 看 一 下 如 何 使 用 grunt-critical 包 让 Grunt 自 动 执行 这 个 过 程 。 


让 Grunt 做 这 些 繁复 的 操作 





事 太 多 ! 





使 用 grunt-critical 包 完成 这 个 操作 非常 简单 ,而 且 这 个 包 还 提供 了 大 量 配 置 选项 。 下 列 
代码 是 针对 简单 使 用 场景 的 配置 ， 从 页 面 中 提取 至 关 重 要 的 CSS, 构建 完成 后 再 把 这 些 样 式 租 入 
<style> 标 签 。 critical 任 务 所 做 的 工作 会 更 进一步 ， 推 迟 请 求 样式 ， 避 人 免 阻塞 泻 染 ， 还 会 添 











加 <noscript> 标 签 ， 为 禁用 JavaScript 功 能 的 用 户 提供 备用 方案 。 


critical: { 
example: { 
options: { 
base: './', 
css: [ 
'page.css' 
] 
js 
src: 'views/page.html', 
dest: 'build/page.html' 
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你 对 上 述 代码 中 的 选项 可 能 已 经 很 熟悉 了 ， 这 些 都 是 指定 文件 路 径 的 选项 。base 选 项 指明 
确定 资源 的 绝对 路 径 时 使 用 的 根 目 录 ， 例 如 /page .css。 设 定好 让 Grunt 代 你 执行 内 髓 样式 的 操 
作 后 ， 记 得 要 部 署 更 新 后 的 HTML 文 件 ， 不 能 再 使 用 构建 之 前 的 版 本 了 。 

在 转换 话题 介绍 自动 部 署 之 前 , 我 们 要 先 说 明 每 次 部 署 前 测试 发 布 版 本 的 重要 性 , 以 避免 一 
些 潜在 危机 。 


4.1.4 ”部 署 前 要 测试 


在 部 署 之 前 ,甚至 是 在 我 们 即将 探讨 的 预 部 署 操 作 之 前 , 需要 测试 发 布 版 本 。 如 果 你 要 进行 
部 署 , 那么 测试 发 布 版 本 是 很 重要 的 ， 因 为 我 们 要 确保 应 用 的 表现 和 预期 的 一 样 , 或 者 至 少 和 我 
们 编写 的 测试 的 预期 表现 一 样 。 

本 书 第 二 部 分 会 深入 介绍 应 用 的 测试 ， 详 细 探讨 两 种 测试 类 型 : 单元 测试 和 集成 测试 。( 但 
测试 类 型 有 很 多 ， 不 止 这 两 种 。) 

口 单元 测试 : 把 应 用 中 的 各 组 件 隔离 开 单独 测试 ， 确 保 组 件 各 自 能 正常 运行 。 
口 集成 测试 (也 叫 端 到 端 测试 ) 测试 已 经 进行 过 单元 测试 的 多 个 组 件 之 间 的 交互 ， 确 保 多 
个 组 件 之 间 能 恰当 地 交互 。 

我 们 现在 不 会 介绍 测试 实践 和 示例 ， 这 是 第 8 章 要 讲 的 内 容 。 记 住 ， 部 署 前 要 测试 应 用 ， 减 
少 把 有 缺陷 的 版 本 部 署 到 主机 环境 的 风险 , 尤其 是 生产 环境 。 下 面 再 介绍 几 个 任务 ,这 些 任务 在 
测试 发 布 版 本 之 后 和 部 署 之 前 执行 。 


4.2 ” 预 部 署 操作 


准备 好 用 于 发 布 的 版 本 ,并 且 测 试 过 之 后 , 接 下 来 就 可 以 部 署 了 。 但 在 部 署 前 ,我 建议 你 执 
行 几 个 重要 的 预 部 署 任务 。 

图 4-2 是 部 署 流程 的 概览 ， 也 包含 部 署 准 备 就 绪 之 前 的 一 些 操作 。 这 幅 图 还 展示 了 如 何 逐 步 
把 更 新 部 署 到 不 同 的 环境 ， 尽 量 确保 能 很 好 地 预测 应 用 的 表现 。 













































































部 署 流程 指定 有 意义 且 唯 一 
的 版 本 号 如 果 在 前 一 个 环境 中 
预 部 署 操作 测试 都 通过 了 就 部 署 
版 本 方面 


应 用 的 车 | || 语义 化 版 本 ee 









































二 E= 
更 改 日 志 吕 








\ 














记录 各 版 本 中 出 现 的 新 功能 或 修正 的 缺陷 : 








图 4-2 ”发布 前 为 应 用 设 定 版 本 号 和 逐步 部 署 转 出 。 在 过 渡 环 境 中 由 QA 团队 测试 能 确 
保 部 署 到 生产 环境 之 前 应 用 是 稳定 的 
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预 部 署 操作 

语义 化 版 本 : 为 应 用 指定 有 意义 的 版 本 号 ,语义 化 版 本 的 格式 类 似 于 MAJOR .MINOR .PATCH- 
BUILD。 这 个 标准 在 管理 依赖 时 能 避免 歧义 。 如 果 你 想 管控 主机 环境 ( 例如 生产 环境 ) 中 当前 部 
署 的 是 什么 代码 ， 就 要 为 应 用 指定 版 本 号 。 这 样 做 可 以 在 出 问题 时 回 滚 到 旧版 。 版 本 号 很 容易 设 
定 ， 而 且 如 果 部 署 的 应 用 没有 版 本 号 ， 你 可 能 会 付出 极 大 的 代价 ,因此 根本 不 用 考虑 ， 必 须要 为 
应 用 设 定 版 本 号 。 

更 改 日 志 : 更 改 日 志 列 出 的 是 项 目 开 发 历史 过 程 中 的 各 项 改动 , 按 改动 出 现 的 版 本 组 织 ( 这 
也 是 设 定 版 本 的 重要 原因 之 一 )， 而 且 进 一 步 划 分 为 三 个 部 分 : 缺陷 修正 、 重 大 更 改 和 新 功能 。 
按照 约定 ，git 代 码 仓库 中 的 更 改 日 志 经 常 放 在 项 目的 根 目 录 中 ， 并 且 命名 为 CHANGELOGtxt， 
或 者 使 用 其 他 你 想 用 的 扩展 名 (例如 md， 这 表示 Markdown,“ 是 一 种 能 把 文本 转换 成 HTML 的 
工具 )。 

稍 后 我 们 会 详细 说 明 如 何 让 更 改 日 志 始 终 保 持 在 最 新 状态 , 不 过 在 此 之 前 我 们 先 来 探讨 语义 
化 版 本 的 细节 。 


4.2.1 语义 化 版 本 


如 果 你 使 用 的 是 Node, 那么 可 能 已 经 熟悉 了 语义 化 版 本 这 个 术语 。npm 中 的 所 有 包 都 使 用 语 
义 化 版 本 ,，“ 因 为 这 个 规范 的 功能 很 强 ， 能 解析 不 同 Node 模 块 的 依赖 。 我 们 开发 的 每 个 Node 应 用 
中 都 有 一 个 package.json 文 件 ， 这 个 文件 中 有 一 个 语义 化 版 本 号 ， 因 此 在 部 署 前 我 们 就 使 用 这 个 
版 本 号 标记 发 布 版 本 。 

我 所 说 的 设 定 版 本 是 指 , 更 新 包 的 版 本 号 ,并 在 VCS 中 创建 一 个 标签 ( 指 在 版 本 历史 中 可 以 
引用 的 一 个 时 刻 )。 为 发 布 版 本 编号 时 可 以 使 用 任何 方案 ， 重 点 是 不 能 覆盖 之 前 的 版 本 ， 也 就 是 
两 个 发 布 版 本 不 能 使 用 相同 的 版 本 号 。 为 了 保证 版 本 号 的 唯一 性 ， 我 习惯 使 用 Grunt 在 每 次 构建 
( 不管 使 用 哪个 构建 模式 ) 后 自动 提升 构建 版 本 号 ， 而 且 部 署 后 我 还 会 提升 补丁 版 本 号 。 主 版 本 
号 要 手动 更 新 ,， 因为 这 可 能 意味 着 引入 了 重大 变化 。 次 版 本 号 也 一 样 ， 因 为 次 版 本 号 变更 通常 说 
明 引 入 了 新 功能 。 

在 Grunt 中 可 以 使 用 grunt -bump 包 提升 版 本 号 。 这 个 包 易 于 配置 , 会 为 你 创建 标签 ,其 至 还 
会 把 更 改 后 的 版 本 号 写 和 人 package.json 文 件 。 以 下 代码 是 这 个 包 的 配置 示例 。 

bump: { 

options: { 
commit: true, 
createTag: true, 
push: true 


: 
} 













































































































































































人 Markdown 是 HTML 的 纯 文本 表示 形式 ， 易 于 阅读 、 编 写 和 转换 成 HTML。2004 年 Markdown 发 布 时 ， 最 早 对 其 进 
行 介绍 的 文章 地 址 是 http://bevacqua.io/bf/markdown。 
@ 关 于 语义 化 版 本 的 更 多 信息 请 访问 http://bevacqua.io/bf/semver。 
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事实 上 ， 这 是 grunt -pump 包 提供 的 默认 配置 。 默 认 配 置 很 合理 ， 我 们 根本 不 用 修改 。 这 个 
任务 会 提升 在 package.json 文 件 中 找到 的 版 本 号 ， 使 用 相关 消息 把 这 个 文件 提交 到 版 本 控制 系统 
中 ， 然 后 在 git 仓 库 中 创建 一 个 标签 ， 最 后 再 把 这 些 改动 推送 到 origin 对 应 的 远程 仓库 。 如 果 把 上 
述 三 个 选项 都 关闭 ， 这 个 任务 只 会 更 新 包 的 版 本 号 。ch04/03_version-bump 文 件 夹 中 的 示例 演示 
的 就 是 这 种 行为 。 

版 本 号 排 好 后 ， 我 们 还 要 修改 更 改 日 志 ， 列 出 自前 一 版 发 布 后 所 发 生 的 变化 。 下 面 详细 说 明 
这 个 操作 。 


4.2.2 ”使 用 更 改 日 志 


感 兴趣 的 产品 ( 尤其 是 游戏 这 种 特别 习惯 提供 更 改 日 志 的 产品 ) 发 布 新 版 时 ， 你 或 许 习 惯 阅 
读 更 改 日 志 ， 不 过 你 自己 维护 过 更 改 日 志 吗 ? 这 没 你 想 的 那么 难 。 

更 改 日 志 可 以 作为 内 部 文档 使 用 ， 用 来 记录 开发 过 程 中 的 改动 ， 即 使 项 目 不 提 供给 消费 者 ， 
它 也 可 以 作为 项 目的 有 效 补 充 。 

如 果 有 某 种 透明 政策 , 或 者 不 想 让 用 户 摸 不 着 头脑 ,那么 就 一 定 要 维护 更 改 日 志 。 不 一 定 每 
次 构建 发 布 版 本 时 都 要 更 新 更 改 日 志 , 因为 有 可 能 你 是 为 了 调试 才 构建 发 布 版 本 的 。 在 测试 前 不 
能 更 新 更 改 日 志 ， 因 为 如 果 测 试 失 败 了 ， 那么 更 改 日 志 就 和 前 一 次 可 用 于 发 布 的 版 本 不 一 致 了 。 
因此 , 构建 了 所 有 测试 都 能 通过 的 版 本 后 才能 更 新 更 改 日 志 , 只 有 此 时 开始 的 更 新 才能 反映 出 自 
上 次 部 署 以 来 发 生 的 变化 。 

统一 管理 变动 往往 很 难 , 因为 你 可 能 忘 了 自 上 次 发 布 以 来 改动 了 什么 , 而 且 你 可 能 不 想 查 看 
git 的 历史 版 本 , 找 出 哪些 改动 值得 放 入 更 改 日 志 。 类 似 地 ,每 次 作 了 修改 之 后 都 手动 更 新 也 很 繁 
琐 ， 而 且 如 果 你 正 沉 浸 在 代码 编写 之 中 , 可 能 会 忘记 做 这 件 事 。 更 新 更 改 日 志 更 好 的 方式 可 能 是 
使 用 grunt-conventional-changelog 包 , 让 它 帮 你 维护 。 有 了 这 个 包 , 你 只 需 在 提交 消息 的 
开头 使 用 约定 好 的 单词 就 行 :fix 表示 缺 陷 修正 ，feat 表 示 引 入 了 新 功能 ，BREAKING 表 示 破 坏 
了 辣 后 兼容 性 。 而 且 ， 在 这 个 包 自 动 解析 和 更 新 更 改 日 志 之 后 ， 你 还 可 以 手动 编辑 。 

这 个 包 安 装 好 后 就 能 使 用 ， 无 需 青 配置 。 以 下 提交 消息 示例 : 

git commit -m "fix: buffer overflows, closes #17" 

git commit -m "feat: reticulate splines for geodesic cape, closes #23" 


git commit -m "feat: added product detail view" 
git commit -m "BREAKING: removed POST /api/vil/users/:id/kill endpoint" 




















































































































4.2.3 ”提升 版 本 号 时 提交 更 改 日 志 


bump-only 和 bump-commit 两 个 任务 可 以 不 提交 任何 改动 就 提升 版 本 号 ， 然 后 再 更 新 更 改 
日 志 ( 稍 后 就 会 看 到 )。 最 后 ， 我 们 要 执行 bump-commit 任 务 ， 一 次 签 人 package.json 和 
CHANGELOG .txt 两 个 文件 , 然后 统一 提交 。 一 旦 你 配置 好 了 bump 任 务 , 并 让 它 提交 更 改 日 志 
就 可 以 使 用 下 述 别名 ， 一 次 性 更 新 构建 版 本 号 和 更 改 日 志 。 本 书 的 配套 源码 中 有 一 个 使 用 
grunt-conventional-changelog 包 的 示例 ， 在 ch04/04_conventional-changelog 文 件 夹 中 。 





























图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 





68 第 4 章 发 布 、 部 署 和 监控 





grunt.registerTask('notes', ['bump-only', 'changelog', 'bump-commit']); 


现在 , 我 们 构建 好 了 发 布 版 本 , 测试 都 通过 ,而 且 也 更 新 了 更 改 日 志 , 接 下 来 就 可 以 把 应 用 
部 署 到 主机 环境 了 。 过 去 ， 部 署 应 用 十 分 普遍 的 做 法 是 ， 手 动 把 构建 好 的 包 上 传 到 生产 服务 锅 。 
但 如 今 ， 这 种 做 法 已 经 过 时 了 ， 部 署 工具 和 托管 应 用 的 平台 都 获得 了 很 大 改进 。 

下 面 我 们 就 来 详细 介绍 如 何 使 用 Heroku。Heroku 是 一 个 Paas 提 供 商 , 它 让 我 们 在 命令 行 中 就 
能 轻易 部 署 应 用 。 


4.3 部署 到 Heroku 


设 定 一 个 部 署 流程 可 以 像 做 寿司 一 样 难 , 也 可 以 像 点 外 卖 一 样 简单 , 这 完全 取决 于 你 想 对 部 
署 有 多 少 控 制 权 。 一 方面 ， 我 们 可 以 使 用 亚马逊 的 基础 设施 即 服务 ( Infrastructure as a Service， 
简称 IaaS ) 平台 这 样 的 服务 ， 对 主机 环境 拥有 完全 的 控制 权 。 你 可 以 选择 自己 喜欢 的 操作 系统 ， 
选择 希望 使 用 的 处 理 能 力 ， 随意 配置 ,在 平台 中 安装 软件 ,然后 完全 包办 系统 运 维 方面 繁重 的 操 
作 ， 例 如 防范 应 用 受到 攻击 、 设 置 代 理 、 选 择 能 保证 在 线 时 间 的 部 署 策略 ， 以 及 从 头 开始 配置 几 
乎 所 有 东西 等 。 

而 另 一 些 服务 则 不 需要 我 们 做 任何 事 ， 这 些 方案 经 常 由 诸如 GoDaddy 等 域名 注册 商 提 供 。 使 
用 这 种 服务 时 ,我 们 一 般 只 需 选 择 一 个 主题 ,提供 一 些 包含 静态 内 容 的 页 面 即 可 ,其 他 工作 都 已 
经 为 我 们 准备 好 了 。 

写 这 本 书 时 , 我 本 想 借 此 机 会 说 明 如 何 把 应 用 部 署 到 亚马逊 的 平台 中 , 但 我 认为 这 样 太 偏离 
本 书 主题 了 。 不 过 ， 本 节 末 尾 我 会 提 到 一 种 让 你 自己 探索 如 何 部 署 到 亚马逊 的 平台 中 的 方式 。 

我 选择 使 用 Heroku ( 不 过 也 有 类 似 的 殖 代 服务 ,例如 DigitalOcean )， 这 个 平台 用 起 来 没有 在 
亚马逊 的 Web 服 务 ( Amazon Web Services， 简称 AWS ) 中 设置 实例 那么 难 , 但 也 没有 使 用 网 站 生 
成 工具 那么 简单 。Heroku 简 化 了 相关 操作 , 直接 在 命令 行 中 就 能 配置 并 把 应 用 部 署 到 他 们 平台 中 
的 主机 环境 。Heroku 是 一 个 PaaS 提 供 商 , 能 托管 任何 语言 编写 的 应 用 ,就 算 缺乏 服务 器 管理 知识 
也 能 部 署 。 本 节 会 一 步 步 说 明 如 何 把 一 个 简单 的 应 用 部 署 到 Heroku。 

写作 本 书 时 ，Heroku 提 供 了 一 个 免费 托管 应 用 的 套餐 。 我们 就 使 用 这 个 套餐 。 本 书 附 带 的 源 
码 中 也 有 部 署 说 明 。™ 

(1) 访问 https://id.heroku.conm/signup/devcenter， 输 入 你 的 电子 邮件 地 址 。 

(2) 接 下 来 需要 安装 Heroku Toolbelt， 这 是 一 系列 命令 行程 序 , 用 于 管理 托管 在 Heroku 中 的 应 
用 。 这 个 工具 的 网 址 是 https://toolbelt.heroku.com。 然后 按照 说 明 ( 也 在 这 个 页 面 中 ), 执行 heroku 
login 命 令 。 

(3) 然后 创建 Procfile 文 件 ， 描 述 运行 应 用 的 操作 系统 进程 。 

Heroku 中 Procfile 文 件 的 作用 见 下 文 注释 。 注意, 这 个 过 程 还 有 几 步 没完 成 , 我 们 稍 后 会 继续 
讲解 。 













































































































































































@ 网 上 有 部 署 到 Heroku 的 示例 ， 地 址 是 http:/bevacqua.io/bfrheroku。 
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Procfile 文 件 ”Procfile 是 个 文本 文件 ， 放 在 应 用 的 根 目录 中 ， 作 用 是 列 出 应 用 使 用 的 进程 类 型 。 
进程 类 型 是 一 个 命令 声明 , 在 启动 对 应 类 型 的 进程 实例 ( 在 Heroku 使 用 的 行 话 中 ， 
实例 叫 ) 时 执行 。 在 Procfile 文 件 中 可 以 声明 不 同 的 进程 类 型 ， 例 如 多 种 
类 型 的 进程 、 单 个 进程 (例如 时 钟 进程 )， 或 使 用 Twitter 流 API 的 服务 。 


长 话 短 说 ， 对 大 多 数 设计 良好 的 Node 应 用 而 言 ，Procfile 文 件 的 内 容 类 似 下 列 代码 : 
web: node app.js 


对 Node 应 用 来 说 ， 我 们 只 需要 做 这 么 多 ， 这 就 是 使 用 Heroku 部 署 应 用 的 特色 。app.js 文 件 的 
内 容 可 以 很 简短 ， 像 以 下 JavaScript 代 码 片段 这 样 ( 在 ch04/05_heroku-deployments 文 件 夹 中 ): 




















Var http = require('http'); 
Var app = http.createServer (handler); 


app.listen(process.env.PORT || 3000); 


function handler (req, res) { 
res.writeHead(200, { 'Content-Type': 'text/plain' }); 
res.end('It\'s alive!'); 


} 


注意 , 我 们 使 用 的 是 process .env .PORT | | 3000, 因为 在 Heroku 中 可 以 通过 环境 变量 PORT 
设置 监听 的 端口 。 

我 们 在 本 地 开发 环境 中 使 用 的 是 端口 3000。 接 下 来 还 有 几 步 要 做 : 

处 在 项 目的 根 目 录 时 ， 在 终端 里 执行 下 述 命令 ， 初 始 化 一 个 git 仓 库 : 

git jinit 

git adqd . 

git commit -~-m "init" 

然后 执行 heroku create 命 令 ， 在 Heroku 中 创建 一 个 应 用 。 这 个 命令 只 需 执 行 一 

此 时 ， 你 的 终端 看 起 来 应 该 和 图 4-3 类 似 。 





















































(xT -Xo) DD ls 
[oe | 


» heroku create 
Creattng intense-beach-4674... done, stack is cedar 
http://intense-beach-4074.herokuapp.com/ | git@heroku.com:intense-beach-4074.git 


图 4-3 ”使 用 Heroku 提 供 的 CLI 创 建 一 个 应 用 


每 次 部 署 时 ， 只 需 把 代码 推送 到 heroku 远 程 仓库 ， 执 行 的 命令 是 : git push heroku 
master。 执 行 这 个 命令 后 会 触发 一 次 部 署 ， 终 端 里 显示 的 内 容 和 图 4-4 类 似 。 
如 果 想 在 浏览 器 中 查看 应 用 ， 可 以 执行 以 下 命令 : 


heroku open 


关于 Heroku 和 其 他 PaaS 提 供 商 ， 需 注意 一 件 事 : 我 们 只 能 部 署 构 建 得 到 的 结果 ， 别 无 他 法 。 
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仓库 中 不 能 包含 构建 的 中 间 产 物 ， 因 为 这 样 可 能 会 导致 不 良 后 果 , 例如 作 了 某 些 修改 之 后 忘记 重 
新 构建 。 我 们 也 不 能 太 省 事 ， 直 接 在 他 们 的 平台 上 构建 。 应 该 在 本 地 或 集成 平台 中 完成 构建 ,不 
能 在 应 用 服务 器 中 构建 ， 因 为 这 样 做 会 影响 应 用 的 性 能 。 


OO nico@ubuntu: ~/nico/git/builldfirst 
master ~/nico/git/buildfirst 
» git push heroku master 
Host key fingerprint is 8b:48:5e:67:6e:c9:16:47:32:f2:87:6c:1f:c8:66:ad 
--[ RSA 2648]----+ 
DO+O.+ ， 
十 丰 二 























Initializing repository, done. 

Counting objects: 6, done. 

Delta compression using up to 4 threads. 

Compressing objects: 166% (5/5), done. 

Writing objects: 166% (6/6), 2.17 KiB | 6 bytes/s, done. 
Total 6 (delta 6), reused 6 (delta 6) 


> Node,js app detected 
> Requested node range: 6.16.X 
> Resolved node version: 6.16.25 
> Downloading and installing node 
> Installing dependencies 
npm WARN package.json buttLdfirst-heroku-depLoyment-exampLe66.1.6 No repository field. 
> Cleaning up node-gyp and npm artifacts 
> Building runttme environment 
> Discovering process types 
ProcfitLe decLares types -> web 


> Compressing... done, 5.3MB 
> Launching... done, v3 
http://polar-brook-3895.herokuapp.com deployed to Heroku 


To git@heroku.com:polar -brook-3895.git 
* [new branch] master -> master 





只 需 执 行 git push 命令 





4.3.1 在 Heroku 的 服务 器 中 构建 


我 们 不 应 该 把 构建 结果 放 到 版 本 控制 系统 中 , 因为 这 是 源 文 件 的 输出 。 我 们 应 该 在 部 署 前 构 
建 ， 把 构建 结果 和 其 他 代码 一 起 部 署 。 大 多 数 PaaS 提 供 商 并 没有 提供 太 多 其 他 方式 。 像 Heroku 
这 样 的 平台 会 从 我 们 推送 的 git 仓 库 中 获取 要 部 署 的 内 容 , 但 我 们 不 想 把 构建 的 中 间 产 物 放 在 版 本 
控制 系统 中 ， 这 就 出 现 问题 了 。 解 决 方法 是 ， 把 Heroku 当 成 持续 集成 平台 〈4.4 节 会 详细 介绍 )， 
让 Heroku 在 它 的 服务 器 上 构建 我 们 的 应 用 。 

Heroku 通 常 不 会 为 Node 项 目 安装 devDependencies 中 声明 的 依赖 ， 因 为 Heroku 执 行 的 命 
install --production， 所 以 我 们 要 使 用 定制 的 构建 包 (buildpack ) 解决 这 个 问 

。 构建 包 是 你 使 用 的 语言 和 Heroku 平 台 之 间 的 接口 ， 由 一 系列 shell 脚 本 组 成 。 使 用 定制 的 启 
2 执行 下 列 命令 即 可 ， 其 中 thing 是 Heroku 为 你 的 应 用 分 配 
的 名 称 。 
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heroku create thing --buildpack https://github.com/mbuchetics/heroku- 
buildpack-nodejs-grunt .git 


使 用 这 个 定制 的 构建 包 创建 应 用 后 , 可 以 像 往常 一 样 推送 代码 , 推送 后 会 触发 Heroku 在 它 的 
服务 器 中 进行 构建 。 最 后 还 有 一 件 事 要 做 ， 即 设置 一 个 heroku 任 务 : 

grunt.registerTask('heroku', ['jshint']); 

如 果 构 建 失败 ，Heroku 会 终止 部 署 ,而且 构建 失败 不 会 影响 到 之 前 部 署 的 应 用 。 本 书 的 配套 
源码 中 有 详细 的 说 明 ， 在 ch04/06_ heroku-grunt 文 件 夹 中 ， 其 中 有 对 整个 过 程 的 演示 。 

下 面 我 们 来 看 一 下 如 何在 一 个 Heroku 应 用 中 搭建 多 个 环境 。 


4.3.2 ”管理 多 个 环境 


如 果 想 在 Heroku 中 搭建 多 个 环境 , “例如 过 渡 环 境 和 生产 环境 ， 可 以 使 用 不 同 的 git 远 程 仓 库 
名 。 在 CLI 中 创建 heroku 之 外 的 远程 仓库 名 ， 方 法 如 下 : 


heroku create --remote staging 
































现在 我 们 不 能 执行 git push heroku master 命 令 了 , 而 要 执行 git push staging master 
命令 。 类 似 地 ， 设 置 环境 变量 时 不 能 执行 heroku config:set FO00=bar 命 令 ， 而 要 明确 告诉 
heroku 使 用 特定 的 远程 仓库 ， 如 heroku config:set FOO=bar --remote staging。 记 住 ， 
环境 的 配置 是 针对 特定 环境 的 ， 就 应 该 这 样 设 置 ,因此 一 般 来 说 , 不 同 的 环境 不 能 共用 第 三 方 服 
务 的 API 密 钥 、 数 据 库 赁 据 或 任何 认证 数据 。 

现在 我 们 直接 在 命令 行 中 就 可 以 配置 和 部 署 到 特定 的 环境 了 。 下 面 该 学 习 持 续集 成 了 , 这 是 
一 种 提升 代码 整体 质量 的 措施 。 如 果 你 想 知 道 如 何 把 应 用 部 署 到 AWS 平 台 , 可 以 查看 本 书 配套 源 
码 中 的 简略 指南 ( 在 ch04/07_aws-deployments 文 件 夹 中 )。” 


4.4 持续 集成 


Martin Fowler 是 最 著名 的 持续 集成 ( Continuous Integration ， 简 称 CI ) 支持 者 之 一 。Fowler 
用 来 描述 CI 的 原 话 如 下 所 示 。” 



































持续 集成 ”是 一 种 软件 开发 实践 。 在 这 个 实践 中 ， 团 队 成 员 频 繁 地 进行 集成 ， 通 常 每 个 成 员 每 
天 都 会 做 集成 工作 ， 从 而 每 天 整个 项 目 会 有 多 次 集成 。 每 次 集成 后 都 会 通过 自动 化 
构建 ( 包括 测试 ) 来 尽快 发 现 集成 过 程 中 的 错误 。 许 多 团队 都 发 现 这 种 方法 大 大 地 
减少 了 集成 问题 ， 而 且 能 快速 开发 出 衔接 性 很 好 的 软件 。 





Q@ Heroku 对 如 何 管理 多 个 环境 提供 了 一 些 建议 , 请 访问 http://bevacqua.io/bf/heroku-environments 查 看 。 
@@ 这 个 示例 演示 了 部 署 到 AWS 的 过 程 ， 地 址 是 http://bevacqua.io/bf/aws。 
(@) Fowler 写 的 这 篇 介绍 持续 集成 的 文章 ， 全 文 地 址 是 http://bevacqua.io/bf/integration。 
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此 外 ,他 还 建议 我 们 在 尽 可 能 接近 生产 环境 的 环境 中 运行 测试 组 件 。 这 个 建议 暗 指 ,最 好 在 
云端 测试 应 用 ， 跟 托管 应 用 一 样 。CI 平 台 ， 例 如 Travis-CI， 提 供 了 诸如 构建 错误 通知 等 的 多 个 功 
能 ， 还 允许 我 们 访问 完整 的 构建 日 志 ， 这 些 日 志 记 录 了 构建 过 程 (包含 测试 ) 中 的 一 切 细节 。 

既然 提 到 了 Travis-CI， 下 面 就 来 看 看 如 何 通 过 远程 方式 把 构建 添加 到 这 个 平台 的 队列 中 。 我 
们 每 次 把 代码 提交 到 仓库 后 都 让 它 构建 一 次 。Travis-CI 的 构建 服务 器 一 次 会 处 理 队列 中 的 一 个 构 
建 ， 运 行 我 们 的 构建 过 程 ， 并 告诉 我 们 构建 结 




















4.4.1 使 用 Travis 托管 的 C 


持续 集成 意味 着 在 远程 服务 器 ( 尽量 和 生产 环境 一 致 ) 中 运行 测试 , 希望 捕获 可 能 会 在 生产 
环境 中 出 现 的 问题 。Travis-CI 是 一 个 CI 平台 ( Circle-CI 也 是 )， 正 确 配置 后 ， 它 会 通过 远程 方式 反 
馈 构 建 的 结果 。 如 果 构 建成 功 , 不 会 有 任何 提醒 。 如 果 构 建 失败 ,你 会 收 到 一 封 通知 邮件 ， 告 诉 
你 构建 出 错 了 。 如 果 之 后 推送 的 代码 解决 了 这 个 问题 , 你 又 会 收 到 一 封 通知 邮件 ,告诉 你 构建 问 
题 修复 了 。 除 此 之 外 ， 在 Travis 的 网 站 中 能 查看 完整 的 构建 日 志 ， 这 些 日 志 在 排 查 为 什么 构建 失 
败 时 特别 有 用 。 图 4-5 是 Travis 发 送 的 一 封 通知 邮件 。 



























































[Fixed] bevacqua/unbox#15 (master - 80e7d37) 


Travis CI 


0) bevacqua / unbox (master) 


由 Nicolas Bevacqua B067d37 Changeset 一 











图 4-5 Travis 发 送 的 通知 邮件 ， 告 诉 你 构建 问题 修复 了 


如 今 ，CI 的 设置 非常 简单 。 首 先 ， 在 项 目的 根 目录 中 创建 一 个 .travis.yml 文 件 。 你 需要 在 这 
个 文件 中 声明 使 用 的 是 什么 语言 , 在 这 里 是 node js, 测试 构建 时 使 用 的 运行 时 版 本 , 以 及 在 运行 
集成 测试 之 前 、 过 程 中 和 之 后 执行 的 一 些 脚 本 。 下 列 代码 展示 了 这 个 文件 可 能 包含 的 内 容 : 


language: node js 



































node_js: 
S00. 10 


before_install: 
- npm install -g grunt-cli script: - grunt ci --verbose --stack 


配置 Travis 和 Grunt 
在 运行 测试 之 前 ， 要 使 用 npm 安 装 Grunt 的 命令 行 界面 grunt-cli。 在 运行 集成 测试 的 服务 
器 中 需要 这 个 CLI， 原 因 和 在 开发 环境 中 需要 它 一 样 ， 因 为 有 了 它 才能 执行 Grunt 任 务 。 我 们 可 以 
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在 before_install 部 分 来 安装 这 个 CLI。 

接 下 来 我 们 只 需 设 置 一 个 ci 任务 就 行 了 。 这 个 任务 可 以 运行 jshint ， 减 少 句法 错误 。 实 际 
上 我 们 在 本 地 已 经 这 样 做 了 ， 前 面 我 们 制定 的 持续 开发 流程 会 在 每 次 修改 代码 后 运行 jshint。 
除了 使 用 jshint 检 查 代码 之 外 ， 我 们 还 应 该 让 ci 任务 运行 单元 测试 和 集成 测试 。 

CI 真正 的 价值 是 ， 它 在 远程 服务 器 中 构建 整个 应 用 ， 并 在 代码 基 中 运行 测试 ( 还 会 使 用 lint 
旦 序 检查 代码 )， 确 保 没 有 依赖 未 签 入 版 本 控制 系统 的 文件 ， 也 没有 依赖 可 能 在 本 地 安装 了 但 远 
程 服务 器 中 不 能 使 用 的 依赖 。 

你 可 能 想 亲 自 尝 试 一 下 这 个 示例 , 我 也 建议 你 试 一 下 , 因为 这 对 热衷 于 部 署 的 人 来 说 是 很 好 
的 练习 。 你 可 以 参照 本 书 配 套 源码 中 的 详细 说 明 来 做 ,“ 这 个 示例 在 ch04/08_ci-by-example 文 件 夹 
中 。 完 成 之 后 ,你 可 能 还 想 学 习 持 续 部 署 。 这 个 实践 可 能 适合 放 到 你 的 工作 流程 中 ,也 可 能 不 适 
合 ， 但 不 管 怎样 ， 都 应 该 充分 了 解 它 。 












































4.4.2 ”持续 部 署 


Travis 平台 支持 持续 部 署 到 Heroku。 ”持续 部 署 其 实 就 是 每 次 把 代码 推送 到 版 本 控制 系统 后 ， 
触发 CI 服务 器 构建 (上 一 节 集 成 Travis CI 服务 时 已 经 做 了 这 一 步 )， 如 果 构 建成 功 ，CI 服 务 需 会 
代表 你 把 应 用 部 署 到 指定 的 发 布 环 境 。 

根据 我 的 经 验 ， 持 续 部 署 是 把 双 刃 剑 。 如 果 一 切 顺利 ， 持 续 部 署 能 为 我 们 带 来 福音 ， 减 少 
繁琐 的 部 署 操作 。 此 时 ， 通 过 构建 和 集成 测试 足以 证 明 应 用 可 以 部 署 到 生产 环境 。 不 过 ， 你 要 
确信 编写 了 足够 的 测试 ， 能 够 捕获 一 切 错误 。 更 好 的 方式 或 许 是 持续 部 署 到 过 渡 环 境 ， 而 不 直 
接 部 署 到 生产 环境 。 在 过 渡 环 境 中 确认 没有 问题 之 后 ， 再 部 署 到 生产 环境 。 这 个 工作 流程 如 图 
4-6 所 示 。 











































































































持续 部 署 流程 
每 次 推送 后 都 会 触发 
CI 服务 器 构建 
本 如 果 在 构建 过 程 中 测试 通过 了 ， 
持续 集成 服务 器 CI 服务 器 会 自动 部 署 
































如 果 都 成 功 了 就 部 署 























运行 构建 过 程 和 测试 全 本 To 
过 渡 环 境 [w*| 生产 环境 














1 手动 部 署 不 是 坏事 ， 或 者 至 少 也 要 

















图 4-6 “建议 使 用 的 持续 部 署 流程 




















@ 网 上 有 完整 注释 的 代码 示例 ， 地 址 是 http:/bevacqua.io/bfltravis。 
@@ Travis 文档 中 介绍 持续 部 署 到 Heroku 的 文章 地 址 是 http:/docs.travis-ci.com/user/deployment/heroku/。 
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如 果 想 持续 部 署 到 Heroku， 还 要 做 一 些 工 作 。 我 们 需要 一 个 Heroku 提 供 的 API 密 钥 ， 而 且 要 
加 密 这 个 密 钥 ， 然 后 再 把 加 密 数 据 写 人 .travis.yml 文 件 。 我 已 经 说 出 了 我 对 直接 部 署 到 生产 环境 
的 担忧 ， 到 底 做 不 做 由 你 自己 决定 。 如 果 你 选择 做 的 话 ， 请 访问 http://bevacqua.io/bf/travis-heroku 
查看 说 明 。 

这 一 章 大 部 分 篇 幅 都 在 说 部 署 ， 让 我 们 对 部 署 有 了 深入 了 解 。 下 面 我 们 转换 话题 ， 介绍 一 下 
在 生产 环境 中 监控 应 用 的 整体 状态 , 尤其 是 单 次 请 求 的 状态 。 我 们 还 会 探讨 记录 日 志 、 调 试 和 追 
查 问 题 的 方式 。 


4.5 监控 和 诊断 


在 生产 环境 监控 应 用 就 像 拥 有 忠实 的 客户 一 样 重要 。 如 果 你 不 重视 应 用 的 正常 运行 时 间 , 客 
户 就 不 会 重视 你 。 也 就 是 说 , 我 们 承担 不 起 不 监控 生产 服务 器 的 后 果 。 监控 是 指 保存 访问 日 志 ( 谁 
访问 了 什么 、 访 问 的 时 间 、 从 哪里 来 ) 和 错误 日 志 ( 什么 出 错 了 )， 以 及 设置 警报 系统 一 这 或 
许 是 最 重要 的 ， 以 便 在 出 现 预期 中 的 问题 时 及 时 收 到 通知 。“ 预 期 中 ”并 不 是 我 的 笔 误 ， 我 们 应 
该 预期 会 出 问题 ， 并 时 刻 准备 好 去 处 理 问题 。 你 的 企业 可 能 无 法 像 Netflix 建 议 的 那样 ,命令 一 个 
猴子 军团 四 处 闲逛 ，" 随 机 关闭 实例 和 服务 ， 确 保 服务 器 能 持续 可 靠 地 容错 ， 例 如 硬件 故障 ， 而 
影响 使 用 服务 的 最 终 用 户 。 不 过 Netflix 的 建议 ( 如 下 所 示 ) 仍然 可 以 应 用 于 几乎 所 有 的 软件 开 
发 工作 中 。 




























































































摘自 Netflix 的 博客 ”如果 我 们 不 一 直 测 试 从 故障 中 恢复 的 能 力 , 在 紧要 关头 , 例如 遭遇 突 发 故障 
时 ， 可 能 会 乱 了 阵脚 。 



































不 过 , 我 们 应 该 如 何 计划 应 对 故障 的 措施 呢 ? 不 幸 的 是 ,我 们 无 法 避免 故障 。 谁 都 可 能 会 遭 
遇 宕 机 的 情况 ， 即 使 是 微软 、 谷 歌 、Facebook 和 Twitter 这 样 的 巨头 也 不 例外 。 我 们 可 以 做 好 充足 
的 计划 , 但 不 管 做 什么 都 阻止 不 了 应 用 出 错 。 我们 能 做 的 是 使 用 模块 化 架构 ,在 服务 和 实例 罕 机 
时 做 好 应 对 工作 。 如 果 能 实现 这 种 模块 化 ， 即 使 某 个 模块 停止 运行 ,也 不 会 造成 重大 影响 ， 因 为 
其 他 模块 还 能 完好 运作 。 我 们 会 在 第 5 章 使 用 模块 化 和 单一 职责 原则 ( Single Responsibility 
Principle， 简 称 SRP ) 进行 开发 ， 届 时 会 详细 说 明 模 块 化 设计 ， 还 会 简略 介绍 Node.js 平 台 。 

监控 应 用 的 第 一 条 规则 是 记录 日 志 , 还 要 设置 通知 系统 ， 以 在 出 错时 发 出 通知 。 下 面 来 看 遵 
从 这 条 规则 的 一 种 合理 方式 。 


4.5.1 日 志和 通知 


我 相信 在 前 端 开 发 中 你 经 常会 使 用 console .1og 审 查 变量 ， 而 且 甚 至 把 这 当成 一 种 调试 机 
制 , 用 它 找 出 代码 执行 的 路 径 ， 协 助 你 确定 缺陷 所 在 。 在 服务 器 端 ,我 们 可 以 使 用 标准 输出 流 和 




























































































Q@ Chaos Monkey ( 混 世 魔 猴 ) 是 Netflix 推 出 的 一 个 制造 混乱 的 服务 ， 详 情 请 访问 http://bevacqua.io/bf/netflix。 
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标准 输入 流 ， 这 两 个 标准 流 会 把 结果 输出 到 终端 窗口 里 。 这 两 个 通道 ( stdout 和 stderr, 稍 后 详 
细 说 明 ) 在 开发 中 很 用， 不 过 在 主机 环境 中 ， 如 果 无 法 捕获 传 给 它们 的 数据 ， 就 几乎 没什么 用 。 

Heroku 提 供 了 一 种 机 制 ， 能 捕获 你 使 用 的 进程 中 的 标准 输出 ， 让 我 们 访问 标准 输出 。 而 且 ， 
Heroku 还 提供 了 扩展 这 一 行为 的 插件 。Heroku 的 插件 提供 了 很 多 我 们 迫切 需要 的 配套 服务 , 例如 
数据 库 、 电 子 邮 件 收 发 系统 、 缓 存 和 监控 功能 等 。 大 多 数 日 志 相关 的 插件 都 能 设置 过 滤 和 通知 功 
能 。 不 过 ,我 不 建议 使 用 Heroku 的 日 志 功 能 ， 因 为 它 只 能 在 这 个 平台 上 使 用 , 十 分 不 利于 迁移 到 
其 他 PaaS 提 供 商 。 自 己 处 理 日 志 并 不 难 ， 稍 后 我 们 会 看 到 这 样 做 的 优点 。 

使 用 winston 处 理 日 志 

我 不 太 喜 欢 使 用 Heroku 提 供 的 日 志 工 具 , 因为 这 个 工具 把 代码 基 和 他 们 的 基础 设施 绑 到 一 起 
了 。 如 果 我 们 对 记录 日 志 的 需求 仅仅 是 写 人 标准 输出 , 那么 更 通用 更 可 靠 的 方式 应 该 是 使 用 一 种 
支持 多 种 通道 的 记录 器 ， 而 不 是 写 和 人 stdqout 。 通 道 决 定 着 如 何 处 理 你 要 记录 的 信息 ， 可 以 写 人 
文件 、 数 据 库 记 录 、 发 送 电子 邮件 或 发 送 推送 通知 到 手机 。 在 支持 多 种 通道 的 记录 器 中 ,一 次 可 
以 使 用 多 个 通道 ， 不 过 用 来 记录 的 API 都 一 样 ， 增 删 通道 不 会 影响 编写 记录 代码 的 方式 。 

Node 有 多 个 常用 的 日 志 库 , 我 选择 的 是 winston, 因为 这 个 库 有 记录 器 所 需 的 各 种 功能 : 日 er 
志 级 别 、 上 下 文 、 多 种 通道 、 简 单 的 API 和 社区 支持 。 而 且 ， 这 个 库 易于 扩展 ， 别 人 已 经 编写 了 
你 可 能 需要 的 几乎 每 种 通道 。 
默认 情况 下 ，winston 使 用 的 通道 是 console， 这 和 直接 使 用 staout 一 样 。 不 过 ， 我 们 可 
以 设置 让 它 使 用 其 他 通道 ， 例 如 记录 到 数据 库 中 , 或 者 记录 到 某 个 日 志 管 理 服 务 中 。 日 志 管 理 服 
务 非常 灵活 ,我 们 无 需 修改 自己 的 应 用 ,只 需 在 服务 提供 的 平台 中 设置 ,就 能 在 出 现 重大 事件 时 
收 到 通知 。 
winston 这 种 处 理 日 志 的 方式 和 所 在 平台 无 关 , 我 们 的 代码 不 用 依赖 主机 平台 提供 的 功能 
捕获 标准 输出 。 使 用 winston 之 前 ， 我 们 要 安装 同名 包 : 


npm install --save winston 

























































































































































































使 用 --save 还 是 --save-dev 

这 里 我 们 要 使 用 --save 标 记 ， 而 不 是 --save-dev， 因 为 winston 和 我 们 至 今 使 用 的 各 
个 Grunt 包 不 同 ， 它 不 是 只 在 构建 过 程 中 使 用 的 包 。 执行 hpm 命 令 时 指定 --save 标 记 ， 会 把 相 
应 的 包 添 加 到 package.json 文 件 的 dependencies 属 性 中 。 


安装 好 winston 后 ， 直 接 把 之 前 使 用 console 的 地 方 换 成 logger 就 行 了 : 


Var logger = require('winston'); 





logger.info('east coast clear as day'); 
logger.error('west coast not looking so hot.'); 


你 可 能 习惯 了 把 console 当 成 全 局 变量 使 用 。 根据 我 的 经 验 , 在 这 种 情况 下 使 用 全 局 变量 没 
什么 问题 ,而 且 这 是 我 允许 自己 使 用 全 局 变量 的 两 种 情况 之 一 ( 另 一 种 情况 是 使 用 nconf， 我 在 
































图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


76 第 4 章 发 布 、 部 署 和 监控 





第 3 章 已 经 提 到 了 )。 我 喜欢 在 一 个 文件 中 统一 声明 所 有 全 局 变量 〈 就算 只 有 两 个 全 局 变量 )， 这 
样 当 我 调用 不 在 模块 中 或 不 是 Node 原 生 的 变量 时 ， 我 可 以 迅速 浏览 这 个 文件 ， 弄 清 是 怎么 回 事 。 
这 个 文件 可 以 命名 为 globals.js， 示 例 内 容 如 下 : 


Var nconf = require('nconf'); 




















global.conf = nconf.get.bind (nconf); 
global.logger = require('./logger.js'); 


我 还 建议 在 一 个 单独 的 文件 中 定义 记录 器 使 用 的 通道 。 除了 默认 的 console 通 道 , 我 们 还 可 
以 使 用 File 通 道 。 下 列 代码 是 前 面 的 代码 片段 中 引用 的 loggerjs 文 件 的 内 容 : 
var logger = require('winston'); 


var api = module.exports = {}; 
Var levels = ['debug', 'info', 'warn', 'error']; 








levels.forEach (function(level)t{ 
api[level] = logger[level] .bind(logger); 
让 


logger.add (logger.transports.File, { filename: 'persistent.1log' }); 

现在 ,调用 logger .debug 时 ， 既 会 把 调试 消息 输出 到 终端 ， 也 会 写 人 一 个 文件 。 虽然 这 两 
个 通道 较为 便利 , 但 其 他 通道 提供 了 更 好 的 灵活 性 和 可 靠 性 , 本 书 的 配套 源码 中 介绍 了 以 下 几 个 通 
道 : winston-mail, 发 生 状 况 时 发 送 电 子 邮 件 ( 日 志 级 别 授权 发 送 邮 件 时 ); winston-pushover， 
直接 把 通知 发 送 到 手机 ; winston-mongoqb， 这 是 传统 的 通道 之 一 ， 会 向 数据 库 中 写 和 记录。 

看 过 这 些 示例 代码 清单 后 ,你 会 更 加 清楚 按照 我 建议 的 方式 如 何 配置 、 记 录 日 志和 声明 全 局 
变量 。 如 果 你 极其 反对 使 用 全 局 变量 ， 也 不 要 惊慌 ， 其 中 有 一 个 示例 没 使 用 全 局 变量 。 我 使 用 全 
局 变量 的 原因 只 有 一 个 : 不 用 在 每 个 模块 中 使 用 reaquire 导 和 同一 个 模块 ， 这 样 更 方便 。 

学 习 了 如 何 处 理 日 志 后 ， 我 们 还 得 谈 谈 如 何 调试 Node 应 用 。 

















































































































4.5.2 ”调试 Node 应 用 


追查 缺陷 时 你 可 能 会 尽力 尝试 各 种 方法 ， 不 过 根据 我 的 经 验 ， 最 好 的 调试 方式 是 增强 日 志 ， 
这 是 我 们 前 一 节 介 绍 日 志 的 原因 之 一 。 虽然 这 么 说 , 调试 Node 应 用 还 有 更 多 的 方式 。 我们 可 以 在 
Chrome DevTools 中 使 用 node-inspector, “可 以 使 用 IDE (例如 WebStorm ) 提供 的 各 种 功能 ， 可 以 使 用 
我 们 已 经 熟知 的 console.1og， 也 可 以 直接 使 用 V8 ( 运行 Node 的 JavaScript3 引 | 擎 ) 自 带 的 调试 器 。? 

追查 的 缺陷 类 型 不 同 ， 使 用 的 工具 也 有 所 不 同 。 例 如 ， 如 果 追 查 的 是 内 存 泄露 ， 可 能 会 使 用 
memwatch 这 样 的 包 ， 在 可 能 发 生 内 存 泄露 时 触发 一 些 事 件 。 我 们 更 常 遇 到 的 情况 是 确认 伟人 误 
差 或 查 明 调用 API 有 什么 问题 ， 此 时 可 以 添加 一 些 日 志 记 录 (临时 使 用 console.1og, 或 使 用 更 
稳定 的 logger .debug )， 或 者 使 用 node-inspector 包 。 












































GD node-inspector 的 开源 仓库 在 GitHub 中 ， 地 址 是 http://bevacqua.io/bf/hnode-inspector。 
@) 请 阅读 Nodejs API 文 档 中 对 调试 的 说 明 ， 地 址 是 http://bevacqua.io/bf/node-debugger。 
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使 用 Node 检 查 器 

node-inspector 包 挂 在 V8 自 带 的 调试 器 上 ， 不 过 ,我 们 可 以 使 用 Chrome 中 功能 全 面 的 调 
试 工 具 代替 Node 提 供 的 基于 终端 的 调试 器 。 使 用 这 个 包 之 前 ， 要 先进 行 全 局 安装 : 

npm install -9 node-inspector 


若 想 在 Node 进 程 中 启用 调试 功能 ,启动 进程 时 要 把 - -aebug 标 记 传 给 noae 命 令 ， 如 下 所 示 ; 





node --debug app.js 
除 此 之 外 , 还 可 以 在 运行 中 的 进程 中 启用 调试 功能 。 为 此 , 我 们 要 找 出 进程 ID ( 即 PID )。 可 
以 使 用 pgrep 命 令 找 出 PID， 如 下 所 示 : 





pgrep node 
上 述 命 令 的 输出 是 运行 中 的 Node 进 程 的 PID。 例 如 ， 它 可 能 是 下 面 这 个 值 : 




















89297 

向 这 个 进程 发 送 USR1 信 和 号 就 能 启用 调试 功能 ， 方 法 是 使 用 kil1 -s 命 令 ( 注意, 我 使 用 的 
PID 是 前 一 个 命令 得 到 的 结果 ): 

kill -s USR1 89297 


如 果 一 切 正 常 ，Node 会 通过 标准 输出 通知 你 调试 器 正在 监听 哪个 端口 : 


Hit SIGUSR1 - starting debugger agent . 
debugger listening on port 5858 


现在 ， 我 们 要 执行 node-inspector 命 令 ， 然 后 打开 Chrome， 再 输入 检查 器 提供 的 地 址 : 

















node-inspector 

如 果 一 切 顺 利 ， 会 看 到 类 似 图 4-7 所 示 的 界面 。 现 在 ，Chrome 浏 览 器 中 有 一 个 成 熟 的 调试 器 
可 用 了 ,用 法 (几乎 ) 完全 和 客户 端 JavaScript 应 用 的 调试 器 一 样 。 在 这 个 调试 器 中 可 以 监视 表达 
式 、 设 置 断 点 、 单 步 执行 代码 和 查看 调用 堆栈 ， 除 此 之 外 还 有 很 多 有 用 的 功能 。 





eee FM3 Ed DD 回 Node Inspector x Onode-inspectorinode-in x 
LE 127.0.0.1:8080/debug?port=5858 
MM 国名 DRO “~ EO 区 加 人 SS 串 二 国人 


| Sources| Console 


jrj appjs homeController,js x 
1 {function (exports, require, module, __filename, __dirnane) { use strict"; 
3 var controller = module.exports = new {requirel'../ViewController,js'))('hone’); 
5 controller. registerRoutes = function(app}{ 
I// app. get("/', controller, getView(' landing' )); 
app.9et{/', controller, redirect('/about')); 
app. Get{'/about, controller.getViewl ‘about'})}); 


11|}) ;| 
三 0 {} Line 11,Column4 


图 4-7 ”使 用 Node 检 查 器 在 Chrome 中 调试 Node.js 代 码 
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比 调试 高 级 的 是 性 能 分 析 ， 其 作用 是 找 出 代码 中 潜在 的 问题 ， 例 如 内 存 泄露 , 这 会 导致 消耗 
的 内 存 急剧 增多 ， 使 服务 器 宕 机 。 


4.5.3 ”分 析 性 能 


分 析 性 能 的 方式 有 多 种 ， 具 体 使 用 哪 种 取决 于 我 们 要 作 具 体 分 析 ( 查 出 内 存 泄露 的 原因 ! ) 
还 是 一 般 性 分 析 ( 如 何 发 现 内 存 消耗 的 峰值 ? )。 我 们 可 以 使 用 一 个 第 三 方 服务 ， 减 轻 自 己 作 分 
析 的 负担 。 

Nodetime 这 个 服务 只 需 几 秒 就 能 设置 好 ， 它 能 分 析 服务 器 负载 、 可 用 内 存 、CPU 使 用 率 等 。 
我 们 可 以 访问 http://bevacqua.io/bf/nodetime-register， 使 用 电子 邮件 地 址 注册 一 个 账号 。 注 册 后 ， 
Nodetime 会 提供 一 个 API 密 钥 。 我 们 要 使 用 这 个 密 钥 设置 nodet ime 包 ,使 用 下 面 几 行 JavaScript 
代码 配置 : 


require('nodetime') .profilel({ 
accountKey: 'your_account_key', 
appName: 'your_application name' 


























7 





























就 这 么 简单 。 现 在 我 们 能 看 到 性 能 指标 了 ， 还 能 对 CPU 的 负载 情况 截图 ， 类 似 于 图 4-8 所 示 。 





9:55 10:00 10:05 10:10 10:15 10:20 


图 4-8 ”Nodetime 记 录 的 服务 器 负载 随时 间 的 变化 
最 后 ， 我 们 来 分 析 一 个 在 Node 应 用 中 可 用 的 进程 缩放 技术 





clustero 





4.5.4 ”运行 时 间 和 进程 管理 


在 发 布 环境 尤其 是 生产 环境 中 , 我 们 不 能 让 进程 出 问题 , 异常 退出 。 我们 可 以 使 用 Node 原 生 
API 中 的 cluster 模 块 减少 进程 出 问题 的 风险 。 这 个 模块 可 以 让 应 用 运行 在 多 个 进程 中 ， 共 同 分 
担负 和 载 ,而 且 必 要 时 还 会 创建 新 进程 -cluster 模 块 利用 多 核 处 理 右 的 优势 和 Node 的 单线 程 模 式 ， 
让 我 们 可 以 轻易 派生 大 量 进程 ,运行 同一 个 应 用 。 这 样 可 以 让 应 用 的 容错 能 力 更 好 ， 因 为 我 们 能 
派生 新 进程 了 。 例如 ,只 需 几 行 代码 我 们 就 能 配置 cluster 模 块 , 让 它 在 一 个 工作 进程 (worker ) 
停止 运行 后 派生 一 个 新 的 工作 进程 ， 有 效 取代 旧 进 程 : 
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Var cluster = require('cluster'); 


// 工作 进程 停止 运行 后 触发 执行 

cluster.on('exit', function () { 
console.log('workers are expendable, bring me another vassal!'); 
cluster.fork(); // 派生 一 个 新 的 工作 进程 

I 


但 这 并 不 意味 着 无 需 关心 进程 内 发 生 的 事 , 因为 派生 新 进程 的 代价 很 高 一 一 不 仅 会 影响 服务 
器 的 负载 (一 定时 间 内 的 请 求 数 ), 还 会 影响 进程 的 启动 时 间 ( 从 派生 到 能 处 理 HTTP 请 求 之 间 等 
待 的 时 间 )。clustezr 模 块 为 我 们 提供 的 是 一 种 易于 理解 的 响应 处 理 方式 ， 即 使 有 工作 进程 停止 
运行 了 ， 也 会 有 其 他 进程 接着 处 理 。 

第 3 章 我 们 介绍 过 nodemon， 它 在 忙碌 的 开发 过 程 中 发 现 有 文件 变动 后 会 重新 加 载 应 用 。 现 
在 我 们 要 使 用 pm2 了， 这 个 工具 和 nodqemon 的 作用 类 似 ， 只 不 过 它 适 合 在 发 布 环境 中 使 用 。 

搭建 集群 

clustez 模 块 很 难 配置 , 而 且 现 在 还 是 实验 性 API, 所 以 未 来 可 能 会 变 。 但 不 可 和 否认 ,cluster 
模块 能 带 来 的 好 处 也 是 十 分 吸引 人 的 。 使 用 pm2 模 块 ， 无 需 编写 任何 代码 就 能 在 应 用 中 使 用 完全 
配置 好 的 cluster 功 能 ， 非 常 方便 。pm2 是 实用 的 命令 行 工具 ， 安 装 时 需要 指定 -g 标 记 : 

npm install -9 pm2 

安装 之 后 ， 我 们 就 可 以 通过 它 运行 应 用 了 ，pm2 会 负责 设置 cluster 模 块 。 以 下 命令 可 以 直 
接 代 替 nodqe app: 


pm2 start app.js -i 2 


主要 的 区 别 在 于 ， 你 的 应 用 会 使 用 cluster 模 块 创建 两 个 工作 进程 ( 因为 指定 了 -i 2 )。 这 
两 个 工作 进程 会 处 理发 给 应 用 的 请 求 ,如 果 其 中 一 个 骨 泪 了 ， 就 会 派生 一 个 新 进程 出 来 ， 继 续 处 
理 请 求 。pm2 还 有 个 额外 的 好 处 ， 就 是 能 热 重 载 代 码 ， 即 无 需 宕 机 就 能 把 运行 中 的 应 用 换 成 新 部 
署 的 代码 。 本 书 的 配套 源码 中 有 相应 的 示例 ， 在 ch04/11_cluster-by-pm2 文 件 夹 中 。 还 有 一 个 示例 
直接 使 用 cluster 模 块 ， 在 ch04/10_ a-node-cluster 文 件 夹 中 。 

在 一 台电 脑 中 搭建 集群 能 立即 收效 , 而 且 价 格 低廉 , 不 过 你 还 应 该 考虑 在 多 台 服 务 器 上 搭建 
集群 ， 减 少 因 服务 器 宕 机 导致 网 站 下 线 的 几率 。 














































































































4.6 总 结 


本 章 所 讲 的 知识 总 结 起 来 有 以 下 几 点 。 

口 熟悉 了 发 布 流程 中 的 优化 措施 ， 例 如 压缩 图 像 和 缓存 静态 资源 。 

口 了 解 了 在 部 署 前 测试 发 布 版 本 、 提 升 包 的 版 本 号 和 更 新 更 改 日 志 的 重要 性 。 

口 介绍 了 部 署 到 Heroku 的 步骤, 还 提 到 了 grunt-ec2 包 , 这 是 众多 可 选 部 署 方法 中 的 一 个 。 
口 学 会 持续 集成 是 件 好 事 ， 因 为 我 们 知道 了 验证 构建 过 程 和 所 发 布 代 码 基质 量 的 重要 性 。 
口 可 以 持续 部 署 ， 但 知道 这 么 做 导致 的 影响 后 ， 就 会 小 心 行事 了 。 

口 简单 介绍 了 日 志 、 调 试 、 管 理 和 监控 发 布 环境 , 这 些 是 在 生产 环境 中 排除 应 用 故障 的 基础 。 
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对 监控 和 调试 的 介绍 都 是 为 进一步 分 析 架 构 设计 、 代 码 质量 .可 维护 性 和 可 测试 性 打 基 础 的 ， 
这 些 是 本 书 第 二 部 分 要 重点 讲解 的 内 容 。 第 5 章 会 介绍 模块 化 和 依赖 管理 ， 实 现 JavaScript 代 码 模 
块 化 的 不 同方 式 ， 以 及 ES6 ( 期 待 已 久 的 ECMAScript 标 准 更 新 ) 中 的 部 分 特性 。 第 6 章 会 揭示 合 
理 组 织 Node 应 用 的 基础 一 一 异步 代码 的 不 同方 式 , 还 会 说 明 如 何 安全 使 用 异步 代码 处 理 异 常 。 第 
7 章 会 帮 你 有 效 地 建 模 、 编 写 和 重 构 代码 ,还 会 分 析 一 些 简 单 的 代码 示例 。 第 8 章 专门 介绍 测试 原 
则 和 自动 化 相关 的 技术 和 示例 。 第 9 章 教 你 如 何 设计 REST API 接 口 ， 还 会 说 明 如 何在 客户 端 使 用 
这 些 接口 。 

读 完 第 二 部 分 后 , 你 会 对 如 何 使 用 JavaScript 代 码 设计 有 条 理 的 应 用 架构 有 更 深刻 的 理解 。 结 
合 第 一 部 分 所 学 的 关于 构建 过 程 和 工作 流程 方面 的 知识 ， 我 们 就 能 使 用 构建 优先 原则 设计 
JavaScript 应 用 了 ， 从 而 达成 本 书 的 最 终 目 标 。 
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管理 复杂 度 


本 书 第 二 部 分 比 第 一 部 分 更 强调 互动 性 ， 有 更 多 实用 的 代码 示例 。 我 们 会 探讨 降低 应 用 设 
计 复 杂 度 的 不 同方 式 ， 例 如 模块 化 、 蜡 步 编程 模式 、 测 试 组 件 、 保 持 代码 简洁 的 方式 和 API 设 计 
原则 。 

第 5 章 详细 探讨 JavaScript 的 模块 化 。 我 们 先 从 基础 知识 开始 ， 学 习 封 装 、 闭 包 和 JavaScript 语 
言 一 些 怪异 的 行为 ， 然 后 介绍 编写 模块 化 代码 的 不 同方 式 ， 例 如 CommonJS、AMD 和 ES6 模 块 ， 
还 会 介绍 不 同 的 包 管理 器 ， 并 就 它们 提供 的 功能 作 比 较 。 

第 6 章 教 你 如 何 编写 异步 代码 ， 会 分 析 大 量 遵循 不 同 的 风格 和 约定 的 实用 的 代码 示例 。 我 们 
会 系统 学 习 Promise 对 象 、 控 制 流 库 async、ES6 生 成 器 和 基于 事件 的 编程 方式 。 

第 7 章 的 目的 是 开阔 你 对 JavaScript 的 眼界 ， 教 你 使 用 MVC 架 构 。 我 们 会 重新 审视 jQuery， 学 
习 如 何 编写 更 好 的 模块 化 代码 。 然 后 ， 我 们 会 使 用 MVC 框 架 Backbone.js， 进 一 步 优化 你 的 前 端 
构建 。Backbone.js 其 至 还 可 以 在 服务 器 端 泻 染 视图 ， 我 们 也 会 在 Node.js 平 台 上 这 样 做 。 

第 8 音 教 你 如 何 使 用 Grunt 任 务 自 动 运 行 测 试 、 编 写 测试 以 及 检查 应 用 在 浏览 器 中 的 表现 ， 如 
何 使 用 Chrome 和 无 界面 的 浏览 器 PhantomJS 运 行 这 些 测试 。 你 不 仅 会 学 习 单 元 测试 ， 还 会 学 习 外 
观测 试 和 性 能 测试 。 

第 9 章 专门 介绍 REST API 的 设计 原则 。 我 们 会 学 习 设 计 API 服 务 时 应 该 遵循 的 最 佳 实践 ， 英 
定好 基础 ， 还 会 学 习 如 何 设计 分 层 架 构 ， 让 API 更 完美 。 最 后 ， 我 们 会 学 习 如 何 按照 REST 式 设计 
原则 定 下 的 约定 轻松 地 使 用 API。 
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理解 模块 化 和 依赖 官 理 








本 章 内 容 

口 封装 代码 中 的 信息 

口 理解 JavaScript 中 的 模块 化 
口 实现 依赖 注入 

口 使 用 包 管 理 器 

口 尝试 ECMAScript 6 的 新 特性 














至 此 ,构建 优先 原则 的 速成 课 结 束 了 ， 从 现在 开始 你 会 发 现 Grunt 任 务 的 数量 变 少 了 ,但 肯 
定 还 要 继续 改善 构建 过 程 。 与 之 前 不 同 的 是 , 你 会 看 到 更 多 的 示例 ， 用 来 讨论 开发 应 用 时 如 何 权 
衡 编 写 JavaScript 代 码 的 不 同方 式 。 本 章 集中 探讨 模块 化 设计 , 说 明 如 何 把 关注 点 分 离 到 不 同 的 模 
块 中 , 降低 应 用 代码 的 复杂 度 。 这样 得 到 的 模块 , 代码 量 少 , 相互 之 间 有 联系 , 能 把 一 件 事 做 好 ， 
而 且 易 于 测试 。 第 6、7 和 8 章 分 别 介绍 异步 代码 流 的 复杂 度 管理 、 客 户 端 JavaScript 模 式 和 实践 ， 
以 及 不 同 种 类 的 测试 。 

第 二 部 分 的 内 容 可 归结 为 : 分离 关注 点 和 提升 应 用 设计 的 质量 ,为 了 增强 分 离 关 注 点 的 能 
我 会 教 你 关于 模块 化 、 共 享 演 染 和 JavaScript 异 步 开发 的 所 有 知识 。 除 此 之 外 ， 我 们 还 要 测试 
JavaScript 代 码 一 一 这 是 第 8 章 的 主要 内 容 。 虽 然 这 是 一 本 针对 JavaScript 的 书 ， 但 也 一 定 要 理解 
RESTAPI 的 设计 原则 ， 增 强 应 用 堆栈 不 同 部 分 之 间 的 交流 一 一 这 正 是 第 9 章 的 主要 内 容 。 

图 5-1 展 示 了 本 书 第 二 部 分 各 方面 的 内 容 之 间 的 联系 。 

应 用 一 般 都 会 依赖 外 部 库 ( 例如 jQuery、Underscore 或 AngularJS ), 这 些 库 应 该 使 用 包 管 理 器 
处 理 和 更 新 ， 而 不 是 手动 下 载 。 类 似 地 ,应 用 本 身 也 可 以 分 解 成 多 个 相互 交互 的 小 部 分 ， 这 是 本 
章 要 讲 的 男 一 个 主要 内 容 。 

你 会 学 习 封 装 代 码 的 技能 ， 把 代码 视 作 自 成 一 体 的 组 件 ; 学 习 如 何 设计 优秀 的 接口 ， 如 何 准 
确 安排 接口 ; 还 会 学 习 如 何 隐藏 数据 ， 只 开放 用 户 需 要 的 那 部 分 。 我 会 用 一 定 的 篇 幅 说 明 难 以 理 
解 的 概念 ， 例 如 决定 变量 从 属 的 作用 域 ， 以 及 一 定 要 理解 的 this 关 键 字 和 用 来 隐藏 信息 的 闭 包 。 

之 后 我 们 会 介绍 如 何 解析 依赖 ， 避 免 手 动 维护 一 组 有 序 的 script 标 签 。 随 后 介绍 管理 包 的 
方式 , 也 就 是 如 何 安装 和 升级 第 三 方 库 和 框架 。 最 后 , 我 们 会 介绍 即将 发 布 的 ECMAScript 6 规范 ， 
这 个 规范 中 有 一 些 用 于 构建 模块 化 应 用 的 实用 的 新 技巧 。 
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模块 化 
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把 依赖 注入 到 使 用 它 的 
模块 中 























动 更 新 并 隔离 外 
部 依赖 
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模块 C 组 件 





































































































依赖 可 以 是 本 地 的 ， 
也 可 以 是 注入 的 
设计 异步 代码 
架构 方面 服务 、 事 件 、 时 序 
异步 操作 
第 7 音 Promise 
模型 视图 生成 器 
MVC 架 构 在 服务 器 和 客 0 
= 端 共 享 演 染 
测试 实践 
可 测试 性 方面 区 








模块 A 


| ae | | 单元 测试 集成 测试 
把 模块 隔离 开 单独 测试， 二 


括 用 到 的 服务 、 依 赖 和 客户 端 
Vo HTML/CSS/JavaScript 







































































图 5-1 模块 化 、 好 的 架构 和 测试 是 设计 可 维护 的 应 用 的 基础 








5.1 封 故 代码 


封装 是 为 了 让 功能 自 成 一 体 ， 隐藏 实 现 细节 ,不 让 使 用 代码 的 人 看 到 。 任何 代码 ,不管 是 一 
个 函数 还 是 整个 模块 ， 都 应 该 明确 定义 自己 的 职责 ， 隐 藏 实现 细节 ， 提 供 简明 的 API 以 满足 使 用 
者 的 需求 。 功 能 自 成 一 体 的 代码 要 比 有 多 个 职责 的 代码 易于 理解 和 修改 。 


























图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


84 第 5 章 理解 模块 化 和 依赖 管理 





5.1.1 理解 单一 职责 原则 


众所周知 , 在 Nodejs 社 区 中 , 包 有 特定 的 作用 。 这 一 点 是 受 Unix 哲 学 启发 的 ,为 的 是 让 程序 
简洁 且 自 成 一 体 。Node,js 包 的 结构 都 一 样 ， 可 用 性 高 ， 而 且 不 会 提供 过 多 的 功能 ， 因 此 npm 包 管 
理 器 才 会 如 此 强大 。 为 了 做 到 这 一 点 ， 多 数 情况 下 ， 包 的 作者 都 会 遵循 单一 职责 原则 ( Single 
Responsibility Principle， 简 称 SRP ): 只 让 包 做 一 件 事 ， 并 把 它 做 好 。SRP 不 仅 适用 于 作为 一 个 整 
体 的 包 ， 也 适用 于 模块 和 方法 这 些 层 面 。SRP 有 助 于 保持 代码 简单 明了 ， 从 而 提高 代码 的 可 读 性 
和 可 维护 性 。 

我 们 来 看 一 个 使 用 案例 ,假如 我 们 要 开发 一 个 组 件 , 把 输入 的 字符 串 转 换 成 带 连 字符 的 形式 。 
在 Web 应 用 (例如 博客 平台 ) 中 生成 具有 语义 的 链接 时 就 需要 这 样 做 。 这 个 组 件 可 以 用 来 把 博客 
文章 的 标题 ,例如 “Some Piece Of Text”, 转换 成 “some-piece-of-text”。 这 个 过 程 叫 创建 别名 ( slug )。 

假设 我 们 首先 编写 出 下 列 代码 ( 在 本 书 配 套 源码 的 ch05/01_single-responsibility-principle 文 件 
夹 中 )。 这 段 代 码 的 处 理 过 程 分 两 步 : 首先 把 所 有 不 是 字母 数字 的 字符 转换 成 单个 连 字 符 ， 然 后 
移 除 位 于 头 部 和 尾部 的 连 字 符 。 这 和 我 们 的 需求 是 一 致 的 ， 不 多 也 不 少 。 


代码 清单 5.1 把 文本 转换 成 别名 
function getSlug (text) { 
Var separator = /[^a-z0-9]+/ig; 
var drop = /^-|-$/g; 
return text 
.replace(separator, '-') 
.replace(drop, '') 
.toLowerCase(); 











介 本 







































































} 
var slug = getSlug('Some Piece Of Text'); 
// <- 'some-piece-of-text' 


一 个 表达 式 / [~a-z0-9]+/ig 是 用 来 找 出 一 个 或 多 个 不 是 字母 数字 的 字符 序列 ， 例 如 空 
白 、 连 字符 和 感叹号 。 这 些 字符 会 被 符 折 成 连 字符 。 第 一 个 表达 式 在 字 符 串 的 首尾 查找 连 字符 。 
使 用 这 两 个 表达 式 可 以 构建 出 在 URL 中 能 安全 使 用 的 博客 文章 标题 。 



































理解 正则 表达 式 

不 知道 正则 表达 式 也 能 理解 这 个 示例 , 但 我 还 是 建议 你 学 习 一 些 基 础 知识 。 正 则 表达 式 用 
于 在 字符 串 中 查找 模式 ， 也 可 以 把 匹配 这 些 模 式 的 地 方 替换 成 其 他 值 。 几 乎 所 有 主流 语言 都 支 
持 这 种 表达 式 。 


/1^a-z0-9]+/ig 这 种 表达 式 看 起 来 可 能 会 让 人 困惑 , 但 写 起 来 并 不 难 。 如 果 你 对 正则 表 
达 式 感 兴趣 ， 可 以 阅读 我 的 博客 中 的 一 篇 文章 。"” 




















在 前 面 的 示例 中 , separator 变 量 的 值 是 一 个 简单 的 正则 表达 式 , 用 来 匹配 不 是 字母 也 不 是 








我 的 博客 中 这 篇 文章 的 地 址 是 http://bevacqua.io/bf/regex。 
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数字 的 字符 序列 。 例 如 , 在 'cats，Dogs and Zepras!' 字 符 串 中 ， 这 个 正则 表达 式 会 匹配 第 
一 个 逗号 和 空格 ，' ang' 两 侧 的 空格 和 末尾 的 '!'。 第 二 个 正则 表达 式 匹配 字符 串 两 端的 连 字符 ， 
让 得 到 的 别名 开头 和 结尾 都 是 单词 。 之 所 以 这 样 做 , 是 因为 前 一 步 把 所 有 不 是 字母 数字 的 字符 都 
转换 成 连 字符 了 。 这 两 步 足 以 在 组 件 中 实现 合适 的 创建 别名 功能 了 。 
假设 我 们 需要 实现 一 个 功能 ,， 即 在 别名 中 添加 发 布 日 期 对 应 的 时 间 戳 。 我 们 很 容易 想到 的 做 
法 是 ,在 这 个 创建 别名 的 函数 中 添加 一 个 可 选 的 参数 。 这 样 做 是 可 以 的 ,但 又 不 太 合理 ， 因 为 这 
样 API 用 起 来 更 容易 让 人 困惑 , 而 且 难 以 重 构 (在 不 影响 其 他 组 件 的 前 提 下 修改 这 个 函数 的 代码 ， 
第 8 章 讨论 测试 时 会 详细 说 明 )， 甚 至 文档 也 难 写 。 更 合理 的 做 法 是 遵循 SRP 原 则 开发 组 件 ， 使 用 
组 合 模式 。 组 合 模式 的 目的 就 一 个 : 依次 调用 多 个 函数 ， 而 不 把 功能 混在 一 个 函数 中 。 所 以 , 我 
们 应 该 先 创建 别名 ， 然 后 再 把 时 间 惟 添加 到 别名 中 ， 如 下 列 代码 片段 所 示 : 


function stamp (date) { 
return date.valueOf (); 















































} 

Va Gtieles * 
title: 'Some Piece Of Text', 
date: new Date() 


}; 





var slug = getSlug(article.title); 
Var time = stamp(article.date); 
Var url = '/' + time + '/' + slug; 


// <- '/1385757733922/some-piece-of-text' 5 
假设 现在 你 的 搜索 引擎 优化 ( Search Engine Optimization， 简 称 SEO ) 专家 顾问 过 来 了 , 说 





不 能 把 无 关 的 单词 放 在 URL 别 名 中 ,以 便 在 搜索 结果 中 有 更 好 的 表现 。 你 可 能 想 直 接 在 get slug 
函数 中 实现 ,但 这 样 做 是 不 对 的 ， 原因 有 如 下 两 点 : 

口 创建 别名 的 功能 本 身 会 难以 测试 ， 因 为 有 些 逻 辑 完 全 和 创建 别名 无 关 ; 

口 随 着 时 间 的 推移 ， 去 除 无 关 单 词 的 代码 会 变 得 更 复杂 ， 而 且 仍 在 get slug 函数 中 。 

如 果 你 做 事 谨慎 ， 就 会 专门 编写 一 个 函数 实现 这 位 专家 的 要 求 ， 如 下 列 代码 片段 所 示 : 


function filter (text) { 
return text.replace (keywords, ''); 
































} 

Var keywords = /\bsome|lthelby|forlof\b/ig; // 匹配 无 用 词 
Var filtered = filter(article.title); 

var slug = getSlug (filtered); 

Var time = stamp(article.date); 

Var url = '/' + time + '/' + slug; 

// <- '/1385757733922/piece-text' 


这 样 看 起 来 就 相当 简洁 了 ! 明确 每 个 函数 的 职责 ,扩展 功能 就 变 得 简单 了 。 这 个 示例 还 透露 
了 重用 的 可 能 性 。 应 用 中 可 能 有 多 处 需要 使 用 这 位 SEO 专 家 建议 的 过 滤 功 能 ,这样 做 就 可 以 从 创 
建 别 名 的 模块 中 轻易 把 这 个 函数 提取 出 来 ,因为 它 不 依赖 其 他 函数 。 同 样 , 这 三 个 函数 也 都 易于 
测试 。 现 在 ， 我 们 可 以 得 出 一 个 结论 ， 保 持 代码 简明 扼要 ， 而 且 实 现 的 功能 完全 和 郴 数 名 一 致 ， 
是 可 维护 、 可 测试 代码 的 基本 要 素 。 第 8 章 会 进一步 介绍 单元 测试 。 



































图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


86 第 5 章 理解 模块 化 和 依赖 管理 





使 用 模块 化 方式 分 拆 功能 很 重要 ， 但 还 不 够 。 ， 组 件 中 有 一 些 方法 , 但 不 会 公开 其 中 的 
变量 ， 为 此 我 们 要 在 公开 的 接口 中 隐藏 这 些 信息 。 i 性 。 














5.1.2 ”信息 隐藏 和 接口 


在 开发 应 用 的 过 程 中 ,代码 的 数量 和 复杂 度 都 会 不 断 增长 。 最 终 , 代码 基 可 能 会 变 成 一 团 乱 
麻 , 不 过 我 们 可 以 编写 更 简单 的 代码 ,让 代码 的 执行 流程 更 易于 理解 ,避免 出 现 这 种 状况 。 有 一 
种 方法 能 逐渐 降低 复杂 度 ， 即 隐藏 不 必要 的 信息 ,不 在 接口 中 开放 。 这 样 就 只 有 有 关 的 信息 才 会 
开放 , 未 开放 的 则 是 对 使 用 者 来 说 无 关 紧 要 的 信息 ,通常 被 称 为 实现 细节 。 息 
包括 计算 结果 时 使 用 的 状态 变量 , 或 提供 给 随机 数 生成 器 的 种 子 数 。 每 个 层面 都 要 隐藏 信息 
个 模块 中 的 每 个 函数 都 应 该 把 对 使 用 者 无 关 的 信息 隐藏 起 来 。 做 到 这 一 点 , 就 帮 了 共 ee 
和 未 来 的 自己 一 个 忙 : 他 们 ( 和 你 自己 ) 在 弄 清 某 个 方法 或 模块 的 作用 时 不 用 过 多 地 进行 猜测 了 。 

作为 示例 ,下 列 代码 清单 演示 了 如 何 构建 一 个 对 象 ， 并 计算 简单 的 平均 值 。 这 个 清单 (在 本 
书 配 套 源码 的 ch05/02_information-hiding 文 件 夹 中 ) 使 用 了 一 个 构造 函数 ， 而 且 扩 充 了 原型 ,为 
Average 对 象 添加 了 add 方 法 和 calc 方 法 。 


代码 清单 5.2 ”计算 平均 值 
function Average () { 
this.sum = 0; 
this.count = 0; 









































} 


Average.prototype.add = function (value) { 
this.sum += value; 
this.count++; 


} 





Average.prototype.calc = function () { 
return this.sum / this.count; 

}}; 

然后 ,我 们 只 需 创 建 一 个 Average 对 象 ， 向 其 中 添加 值 ， 然 后 再 计算 平均 值 。 这 种 实现 方式 
有 个 问题 ， 即 你 可 能 不 想 让 人 直接 访问 私有 数据 ， 例 如 Average.count。 或 许 你 想 使 用 我 们 即 
将 介 组 的 技术 隐藏 这 些 值 ， 不 让 使 用 这 个 API 的 人 使 用 。 不 过 ， 更 简单 的 方式 或 许 是 完全 不 用 这 
个 对 象 , 把 它 改 成 一 个 函数 。 我 们 可 以 使 用 .requce 方 法 (这 是 ES5 新 提供 的 方法 ,在 Array 原 型 
中 ) 实现 一 个 累加 器 ， 把 数组 中 的 元 素 加 在 一 起 ， 然 后 再 计算 平均 值 : 


function average (values) { 
var sum = values.reduce(function (accumulator, value) { 
return accumulator + value; 


}, 0); 























娃 


return sum / values.length; 


} 
这 个 函数 的 优点 是 完全 符合 我 们 的 要 求 。 它 的 参数 是 一 个 数组 ,返回 结果 为 各 元 素 的 平均 值 ， 
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正如 其 名 所 示 。 而 且 ， 和 前 面 使 用 原型 实现 的 方式 相 比 ， 它 没有 保存 任何 状态 变量 ， 有 效 隐 藏 了 
内 部 运作 信息 。 我 们 称 之 为 纯 函数 : 其 返回 结果 只 取决 于 传人 的 参数 , 与 不 在 参数 中 的 状态 变量 、 
服务 或 对 象 都 没关系 。 纯 函数 还 有 一 个 特性 : 除了 返回 值 之 外 没有 任何 副作用 。 这 两 个 特性 结合 
在 一 起 ， 让 纯 函 数 成 为 一 种 很 好 的 接口 一 一 自 成 一 体 ， 而 且 易 于 测试 。 因 为 纯 函 数 没 有 副作用 ， 
也 没有 外 部 依赖 ， 所 以 你 可 以 放心 重 构 ， 只 要 不 改变 输入 和 输出 之 间 的 关系 就 行 。 

功能 型 工厂 函数 

除 此 之 外 , 我 们 还 可 以 使 用 功能 型 工厂 函数 ( functional factory ) 实现 。 执 行 这 种 函数 后 会 得 
到 另 一 个 函数 , 使 用 得 到 的 这 个 函数 就 可 以 做 我 们 想 做 的 事 。 在 工厂 函数 中 声明 的 任何 变量 都 只 
能 在 这 个 函数 和 内 部 的 函数 中 使 用 一 一 读 了 下 一 节 你 会 更 好 地 理解 这 一 点 。 通 过 下 列 代码 你 会 更 
好 地 理解 工厂 函数 : 


function averageFactory () { 
Var Sum = 0; 
var count = 0; 
return function (value) { 
sum += value; 
Count++; 
return sum / count; 



































} 


sum 和 count 两 个 变量 只 能 在 averageFactory 国 数 返 回 的 函数 实例 中 访问 ， 而 且 各 个 实例 
只 能 访问 自身 上 下 文中 声明 的 变量 , 不 能 访问 其 他 实例 的 上 下 文 。averageFactory 消 数 可 以 理 
解 成 一 个 饼 切 , 切 出 的 饼干 (函数 ) 接受 一 个 值 , 然后 返回 (目前 为 止 得 到 的 ) 累加 值 的 平均 数 。 
下 列 示例 说 明了 如 何 使 用 这 个 工厂 函数 : 


Var avg = averageFactory(); 
ZX— function 

avg (1); 

Vy 

avg (3); 

A 2 


使 用 饼 切切 饼干 时 不 会 影响 已 经 切 好 的 饼干 ,类似 地 , 创建 多 个 实例 也 不 会 影响 已 经 创建 的 
实例 。 这 种 编程 方式 和 前 面 使 用 原型 的 方式 类 似 , 不 过 现在 除了 实现 主体 ， 其 他 地 方 都 不 能 访问 
sum 和 和 count 变量。 使 用 者 无 法 访问 这 些 变量 ， 实 际 上 就 是 把 它们 当 作 API 的 实现 细节 了 。 实 现 
细节 不 仅 会 带 来 干扰 ， 还 有 可 能 导致 安全 隐患 ， 因 为 我 们 不 想 让 外 部 世界 修改 组 件 的 内 部 状态 。 

变量 作用 域 定义 在 什么 地 方 能 访问 变量 ， 且 this 关 键 字 为 函数 的 调用 者 提供 上 下 文 。 理 解 
这 两 点 之 后 才能 构建 出 可 靠 的 结构 ， 有 效 隐藏 信息 。 把 变量 放 在 恰当 的 作用 域 中 ,就 能 把 信息 隐 
藏 起 来 ， 不 让 接口 的 使 用 者 知道 。 


5.1.3 ”作用 域 和 this 关 键 字 
毫 无 疑问 ，Douglas Crockford 写 的 JavaScript The Good Partsu( O’Reilly Media，2008 年 出 版 ) 



















































































GD JavaScript: The Good Parts 在 亚马逊 有 售 ， 地 址 是 http://bevacqua.io/bf/goodparts。 
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是 本 经 典 的 书 。 在 这 本 书 中 ，Crockford 说 明了 JavaScript 语 言 很 多 怪异 的 表现 ， 而 且 建 议 我 们 避 
免 使 用 “糟糕 的 特性 ”， 例 如 with 块 、eval 语 句 和 会 强制 转换 类 型 的 相等 性 运算 符 ( == 和 != )。 
如 果 你 没 读 过 这 本 书 , 我 建议 你 尽早 读 一 下 。Crockford 说 ，new 和 this 两 个 关键 字 难 以 理解 ， 建 
议 彻底 不 用 。 但 我 建议 你 至 少 理解 这 两 个 关键 字 。 我 会 介绍 this 表 示 什 么 、 如 何 处 理 它 ， 以 及 
为 其 赋值 。 在 任何 JavaScript 代 码 中 ， 上 下 文 都 由 当前 函数 的 作用 域 和 this 组 成 。 

如 果 用 过 服务 器 端 语言 ， 例 如 Java 或 C#，, 你 就 会 理解 什么 是 作用 域 。 作 用 域 是 存放 变量 的 袋 
子 ， 过 到 左 花 括号 时 打开 ， 遇 到 右 花 括号 时 关闭 。 在 JavaScript 中 ,作用 域 位 于 函数 层面 (这 叫 词 
法 作用 域 )， 而 不 是 代码 块 层面 。 



















































































C# 的 作用 域 
块 级 作用 域 
BUDlic word Nolleouard tthing) 
{ message 变 量 在 定义 它 
Ee (Elna == 的 代码 块 外 不 可 用 。 
{ 
Var message = "Reference must be non-null!"; 


throw new ArgumentNullException(message); 
) 
}) 





JavaScript 的 作用 域 
ssage 变 量 被 提升 到 词 


词法 作用 域 me 
法 作用 域 的 顶端 ， 在 整个 
function NullGuard (thing) { 函数 中 都 可 用 。 
写生 区 生计 各 巡 直 让 学 
Var message = "Reference must be non-null!"; SN 
throw new Error (message) 


} 









































} 























图 5-2 ”作用 域 在 不 同 语言 中 的 差异 


图 $-2 通 过 对 比 C# 和 JavaScript 解 释 了 词法 作用 域 和 块 级 作用 域 之 间 的 区 别 。C# 使 用 块 级 作用 
域 ，Java、Perl 、C 和 C++ 等 语言 也 是 ; JavaScript 则 使 用 词法 作用 域 ，R 语 言 也 是 。 

这 幅 图 中 的 两 个 示例 都 使 用 了 message 变 量 。 在 第 一 个 示例 中 , message 只 在 if 语句 块 中 可 
用 ,而 在 第 二 个 示例 中 ， 因 为 用 的 是 词法 作用 域 , message 在 整个 函数 中 都 可 用 。 稍 后 我 们 会 看 
到 ， 这 种 行为 也 有 好 处 也 有 坏处 。 

1. JavaScript 中 的 变量 作用 域 

理解 作用 域 的 处 理 方式 有 利于 理解 模块 模式 。 我 们 在 3.2 节 会 解释 模块 ， 这 是 一 种 将 代码 基 
组 件 化 的 方式 。 在 JavaScript 中 ， 函 数 是 一 等 公民 ， 处 理 方 式 和 任何 对 象 都 一 样 。 和 藤 套 的 函数 有 各 
自 的 作用 域 ， 而 且 内 部 函数 能 访问 父 级 作用 域 乃 至 全 局 作用 域 。 请 看 下 述 代码 中 的 getcounter 
郴 数 : 
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function getCounter () { 
var counter = 0; 
return function () { 


return counter+t++; 
}; 
} 


在 这 个 示例 中 ，counter 变 量 绑 定 在 getcounter 函 数 的 上 下 文中 。 返 回 的 函数 能 访问 
counter， 因 为 它 在 父 级 作用 域 中 。 不 过 ， 在 getcounter 国 数 之 外 无 法 访问 counter 变 量 ， 
为 访问 这 个 变量 的 通道 关闭 了 ， 只 有 授权 的 getcounter 函 数 的 后 代 能 处 理 。 如 果 在 两 个 作用 域 
中 都 加 上 console.1log(this)，, 会 看 到 返回 的 都 是 全 局 作用 域 中 的 window 对 象 实例 。 这 是 真正 
的 “糟糕 的 特性 ”。 默 认 情 况 下 ，this 关 键 字 引用 的 是 全 局 变量 ， 如 下 列 代 码 清单 所 示 : 

















代码 清单 5.3 ”理解 Lhis 关 键 字 
function scoping () { 


console.1log (this); 


return function () { 
console.log(this); 
用 
} 
scoping() (); 
// <- Window 
// <- Window 


this 关 键 字 的 处 理 方式 有 多 种 。 把 上 下 文 赋值 给 this 最 常见 的 方式 是 在 对 象 上 调用 方法 。 
例如 ，'Hello' .toLowerCase() 中 的 'Hello' 就 是 调用 这 个 方法 时 this 的 上 下 文 。 

2. 获取 调用 位 置 

把 函数 当成 对 象 的 属性 直接 调用 时 ， 该 对 象 将 被 this 引 用 。 如 果 方 法 是 对 象 的 原型 ， 例 如 
Object .prototype.toString， 则 this 引 用 的 也 是 调用 方法 的 对 象 。 注 意 ， 这 种 行为 很 不 可 
靠 。 如 果 直 接 引 用 方法 并 调用 ， 那 么 thnis 引 用 的 不 再 是 父 级 对 象 ， 而 是 变 成 了 全 局 对 象 。 为 了 
说 明 这 种 行为 ， 我 再 给 出 一 个 代码 清单 示例 。 


代码 清单 5.4 this 关键 字 的 作用 域 

































































Var parent = { 
method: function () { 
console.log(this); 
We 如 果 在 父 级 对 象 上 调用 方法 ， 
7 j 久 是 这 个 父 级 欢 
parent .method () ; a oe 


// <- parent 


Var parentless = parent .method; 如 果 没 有 父 级 对 象 , 就 
parentless (); 回落 到 默认 上 下 文 。 


// <- Window 
在 严格 模式 中 ，this 的 默认 值 是 undefined, 而 不 是 window。 如 果 没 使 用 严格 模式 ,this 
引用 的 始终 是 一 个 对 象 : 如 果 调 用 者 是 对 象 引用 ， 则 this 引 用 的 是 这 个 对 象 ; 如 果 调 用 者 是 基 
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本 类 型 的 值 ， 例 如 布尔 值 、 字 符 串 或 数值 ， 则 this 引 用 的 是 这 些 值 对 应 的 包装 对 象 ; 如 果 调 用 
者 是 undefined 或 nu11, 抑或 直接 引用 方法 , 或 者 调用 .abpply、.cal1 或 .bind 方 法 , 那么 this 
引用 的 是 全 局 变量 (在 严格 模式 中 引用 的 是 unaefined )。 在 严格 模式 中 , 通过 this 向 函数 传 值 
时 ，this 引 用 的 值 不 会 打包 成 对 象 。 稍 后 我 们 会 介绍 严格 模式 的 其 他 作用 。 

调用 函数 时 ， 除 了 立即 执行 函数 之 外 ， 还 可 以 使 用 不 同 的 方式 为 this 赋 值 。 这 种 操作 并 非 
完全 无 法 控制 。 事 实 上 , 使 用 .bind 方 法 创建 的 函数 始终 会 为 this 赋 值 。 执 行 函 数 还 有 其 他 方式 ， 
例如 可 以 调用 .apply 方 法 或 .cal1 方 法 , 也 可 以 使 用 new 运 算 符 。 以 下 代码 列 出 了 这 几 个 方法 的 
用 法 ,便于 速 查 : 


Array .prototype.slice.call([9, 5, 7], 1, 2) 
A | 


























eT 














cErTing DiototyDe Slt aDBly (L320 eT Es [3 23; 0025] 


Var -data [L329] 
var add = Array.prototype.push.bind(data, 3); 


add(); // 实际 上 和 data.push(3) 的 作用 一 样 
adqd(4); // 实际 上 和 data.push(3，4) 的 作用 一 样 


console.log(data); 
fd R= NL 


在 JavaScript 中 ， 变 量 的 作用 域 按 照 下 述 顺序 确定 。 
口 作用 域 上 下 文 变量 : this 和 arguments。 
口 函数 的 具名 参数 : function (these、variable 和 names) 。 
口 函数 表达 式 : function something () {}。 
口 本 地 作用 域 中 的 变量 : var foo。 
如 果 你 没有 在 JavaScript 解 释 器 中 试验 这 些 代码 , 一 定 要 看 一 下 代码 示例 (在 ch05/03_context- 
scoping 文 件 夹 中 )。 这 些 示例 在 本 书 的 配套 源码 中 都 有 ， 而 且 还 有 一 些 行内 注释 ， 便 于 理解 。 下 
面 讨论 严格 模式 的 含义 。 


5.1.4 严格 模式 


严格 模式 启用 后 ， 会 修改 代码 运行 方式 的 语义 ， 不 再 允许 声明 变量 时 不 使 用 var 关 键 字 ， 还 
会 禁止 使 用 其 他 类 似 的 容易 出 错 的 做 法 。 在 某 种 程度 上 ， 这 相当 于 是 对 lint 程 序 的 补充 。 "严格 模 
式 可 以 在 单个 函数 中 启用 ， 也 可 以 在 整个 脚本 中 启用 。 

对 客户 端 代码 来 说 ,推荐 在 单个 函数 中 启用 。 若 想 启用 严格 模式 , 需要 在 文件 或 函数 的 顶部 


加 上 'use strict'; 语 句 : 




















GD Mozilla 开 发 者 网 络 ( Mozilla Developer Network ) 对 严格 模式 作 了 详细 说 明 ， 地 址 是 http://bevacqua.io/bf/strict。 
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funetronm "(yt 
'use strict'; 


// 从 此 处 开始 使 用 严格 模式 











} 

启用 严格 模式 后 ，this 的 默认 值 是 undaefineda， 而 不 是 全 局 变量 。 而 且 ， 严 格 模式 对 差错 
没 那么 宽容 ， 会 提醒 出 错 ， 而 不 是 自动 纠正 。 严 格 模式 作出 的 限制 还 包括 禁止 使 用 with 语句 和 
八进制 计数 法 ， 以 及 不 许 使 用 eval 和 arguments 等 关键 字 。 


'use strict'; 
foo = 'bar' // ReferenceError foo is not defined 


在 严格 模式 中 ,JavaScript 引 敬 遇 到 下 述 操作 时 也 会 抛 出 异常 : 为 只 读 属 性 赋值 , 删除 不 能 删 
除 的 属性 , 使 用 重复 的 属性 键 实例 化 对 象 , 或 使 用 重复 的 参数 名 声明 函数 。 这 种 不 容忍 有 助 于 捕 
获 因 编 程 不 仔细 而 导致 的 问题 。 

关于 作用 域 ， 最 后 我 还 要 说 一 个 怪异 的 行为 ， 这 种 行为 通常 称 为 作用 域 提升 (hoisting )。 如 
果 想 编写 复杂 的 但 易于 理解 的 JavaScript 应 用 ， 一 定 要 理解 这 个 行为 。 


5.1.5 ”提升 变量 的 作用 域 


理解 了 作用 域 、this 的 工作 方式 和 作用 域 提 升 后 ， 你 就 能 回答 JavaScript 相 关 工 作 面 试 中 
提出 的 大 多 数 问 题 。 我们 已 经 讲 了 前 两 点 , 可 是 作用 域 提升 到 底 是 什么 呢 ? 在 JavaScript 中 ,， 作 
用 域 提 升 的 意思 是 ,声明 的 变量 会 移 到 作用 域 的 开头 。 这 可 以 用 来 解释 某 些 情况 下 你 过 到 的 怪 
异 行为 。 

对 函数 来 说 ， 提 升 的 是 整个 表达 式 。 也 就 是 说 ,除了 声明 函数 的 表达 式 之 外 ， 函 数 主体 的 作 
用 域 也 提升 了 。 如 果 说 阅读 JavaScript: The Good Parts 只 让 我 学 到 了 一 个 技能 ， 那 一 定 是 作用 域 
提升 。 我 掌握 了 作用 域 提升 的 原理 ， 这 改变 了 我 编写 代码 的 方式 。 

因为 有 了 作用 域 提 升 ,在 声明 函数 前 才能 调用 函数 。 不 过 , 把 函数 赋值 给 变量 却 没有 这 种 效 
果 ， 因 为 调用 冰 数 时 不 会 执行 赋值 操作 。 下 列 代码 是 一 个 示例 ， 本 书 的 配套 源码 中 有 更 多 示例 ， 
在 ch05/04_hoisting 文 件 夹 中 。 


















































































































































Var Value = 2;，; 
test (); 


function test () { 
console.log(typeof value); 
console.log(value); 
Var Value = 3; 


} 

你 可 能 期 望 这 个 函数 会 完 打印 'number' ， 然 后 再 打印 2 或 3。 请 自己 试 着 执行 一 下 。 为 什么 
打印 的 是 'undefined' 和 undefined 呢 ?这 就 是 作用 域 提升 的 作用 。 如果 我 们 调整 代码 的 顺序 ， 
先 提升 作用 域 ， 然 后 再 调用 函数 ， 理 解 起 来 会 容易 些 ， 如 下 列 代码 清单 所 示 。 
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代码 清单 5.5 ”提升 作用 域 


var value; 


function test () { 
var value; 
console.log(typeof value); 
console.log(value); 
Value = 3; 


} 


Value = 2; 
test (); 


虽然 我 们 在 test 函数 末尾 为 value 赋 值 , 但 value 被 提升 到 作用 域 的 顶端 了 , 这 也 是 为 什么 
test 限 数 没 有 抛 出 TypeError 异 常 ， 提 醒 ungdefinegd 不 是 函数 的 原因 。 记 住 ， 如 果 使 用 变量 形 
式 声明 test 函 数 ， 写 成 下 列 代码 清单 这 样 ， 会 抛 出 这 个 异常 ， 因 为 虽然 var test 的 作用 域 得 到 
提升 了 ， 但 赋值 语句 没 得 到 提升 。 


代码 清单 5.6 提升 var test 的 作用 域 


var value; 
Var test; 









































Value = 2; 
test (); 


test = function () { 
var value; 
console.log(typeof value); 
console.log(value); 
Value = 3; 


}; 

代码 清单 5.6 中 的 代码 不 会 按 预 期 的 运行 ， 因 为 调用 函数 时 ，test 还 未 定义 。 我 们 一 定 要 掌 
握 什么 会 提升 ,什么 不 会 提升 。 如 果 养 成 了 习惯 , 编写 代码 时 假定 变量 声明 和 函数 已 经 提升 到 了 
作用 域 的 顶端 ， 遇 到 的 问题 就 会 少 一 些 。 至 此 ， 你 应 该 对 作用 域 和 this 关 键 字 有 了 深入 了 解 ， 
下 面 我 们 来 介绍 JavaScript 中 的 闭 包 和 模块 化 模式 。 





























5.2 ”JavaScript 模块 


到 目前 为 止 , 我 们 已 经 介绍 了 单一 职责 原则 和 数据 隐藏 , 也 学 习 了 如 何在 JavaScript 中 应 用 这 
些 知 识 。 我 们 也 很 好 地 理解 了 变量 的 作用 域 和 提升 行为 。 下 面 介 绍 闭 包 , 闭 包 能 创建 新 的 作用 域 ， 
防止 变量 泄露 信息 。 

5.2.1 闭 包 和 模块 模式 
函数 也 叫 闭 包 , 这 是 为 了 特别 强调 函数 会 创建 新 作用 域 。 立即 调用 的 函数 表达 式 ( Immediately- 
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Invoked Function Expression , 简称 IIFE ) 指 立即 会 执行 的 函数 。 如 果 只 需要 闭 包 , 就 可 以 使 用 IIFE。 
以 下 代码 是 一 个 HIFE 示 例 : 
(function () { 
// 新 作用 域 
FY 
注意 , 这 个 函数 要 放 在 一 对 括号 中 。 这 对 括号 不 仅 告 诉 解释 器 我 们 声明 了 一 个 匿名 前 数 , 还 表 
明 我 们 要 把 它 当 成 一 个 值 使 用 。 这 种 表达 式 还 可 以 赋值 给 变量 ， 以 便 通 过 变量 引用 函数 的 返回 值 。 
这 种 写法 通常 被 称 为 模块 模式 ， 如 下 列 代码 所 示 ( 在 本 书 配 套 源码 的 ch05/05_closures 文 件 夹 中 ): 
var api = (function () { 
var local = 0; // 私有 变量 ， 在 本 地 作用 域 中 
Var publicInterface = { 


counter: function () { 
return ++local; 





























} 
}; 
return publicIinterface; 
py 
api.counter(); 
/= 1 
以 上 代码 还 有 一 种 写法 ， 即 完全 不 依赖 闭 包 之 外 的 代码 ， 而 是 把 需要 使 用 的 变量 导入 其 中 。 
在 这 种 写法 中 ， 如 果 想 提供 公开 的 API， 就 导入 全 局 对 象 。 我 比较 喜欢 使 用 这 种 方式 ， 因 为 一 切 i 
代码 都 完美 地 包含 在 闭 包 中 ， 可 以 使 用 JSHint 找 出 因 未 声明 的 变量 导致 的 问题 。 如 果 不 使 用 闭 包 
和 JSHint， 一 不 小 心 ， 变 量 就 跑 到 全 局 作用 域 中 了 。 下 列 代 码 演 示 了 这 种 写法 : 


(function (window) { 
var privateThing; 





























function privateMethod () { 


} 


window.api = { 
// 公开 接口 
地 
}) (window); 
下 面 我 们 来 介绍 原型 的 模块 化 。 这 也 是 HFE 表 达 式 的 补充 方式 , 但 不 使 用 闭 包 ,而 是 扩大 原 
型 。 使 用 原型 能 提升 性 能 ， 因 为 很 多 对 象 都 共用 一 个 原型 ， 把 函数 添加 到 原型 中 能 为 继承 这 一 原 
型 的 所 有 对 象 提供 功能 。 


5.2.2 ”原型 的 模块 化 

在 某 些 场合 中 , 或 许 恰好 适合 使 用 原型 。 原型 可 以 理解 为 JavaScript 声 明 类 的 方式 , 不 过 这 是 
一 个 完全 不 同 的 模型 , 因为 原型 只 是 链接 , 不 能 覆盖 属性 , 只 能 把 整个 属性 都 替换 掉 ( 手动 覆盖 )。 
总 之 , 不 要 把 原型 当成 类 , 否则 会 为 代码 的 维护 带 来 问题 。 创建 模块 的 多 个 实例 时 , 原型 最 有 用 。 
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例如 ， 所 有 JavaScript 字 符 串 都 共用 String 原 型 。 处 理 DOM 节 点 时 适合 使 用 原型 。 有 时 ， 我 会 在 
闭 包 中 声明 原型 的 模块 , 然后 在 闭 包 里 原型 的 外 部 维护 私有 状态 。 下 列 代码 清单 中 的 代码 是 虚构 
的 , 不 过 本 书 的 配套 源码 中 有 完整 可 用 的 示例 (在 ch05/06_prototypal-modularity 文 件 夹 中 ), 更 好 
地 说 明了 这 个 模式 。 

代码 清单 5.7 演示 原型 的 虚构 代码 


var lastLd = ,0:; 
var data = {}; 























function Lib () { 
this.id = ++lastId; 
datalthis.id] = { 


thing: 'secret' 
} 
} 


Lib.prototype.getPrivateThing = function () { 
return datalthis.id] .thing; 
人 


这 是 保护 数据 、 不 让 使 用 者 访问 的 一 种 方式 。 有 时候 不 必 私 有 化 数据 ,而且 让 使 用 者 处 理 实 
例 的 数据 说 不 定 是 件 好 事 。 我 们 应 该 把 所 有 代码 放 在 一 个 闭 包 中 ， 以 防 泄 露 私 有 数据 。 我 认为 
JavaScript 中 的 闭 包 在 处 理 DOM 时 最 有 用 ( 我 们 在 第 7 章 会 探讨 这 个 话题 )， 因 为 处 理 DOM 时 ,， 通 
常 要 同时 处 理 多 个 对 象 。 此 时 使 用 原型 能 提升 性 能 ， 因 为 不 用 在 每 个 实例 中 重复 定义 处 理 DOM 
的 方法 能 节省 资源 。 

至 此 , 我 们 对 作用 域 、 作 用 域 提升 和 闭 包 的 工作 方式 有 了 更 深入 的 理解 ,下面 来 介绍 模块 之 
间 的 交互 方式 。 首 先 ， 我 们 来 介绍 CommonJS 模 块 。CommonJS 既 能 使 用 合理 的 方式 组 织 代码 ， 
又 能 处 理 依赖 注入 ( Dependency injection， 人 简称 DI )。 

































































5.2.3 CommonJS 模 块 


CommonJS (以 下 简称 CJS ) 是 Nodejs ( 除 此 之 外 还 有 其 他 的 框架 ) 采用 的 规范 ， 用 来 编写 
模块 化 的 JavaScript 文 件 。 一 个 文件 就 是 一 个 模块 ， 如 果 把 值 赋 给 modqule .exports, 这 个 值 就 是 
这 个 模块 的 公开 接口 。 使 用 模块 时 ,要 调用 require 方 法 将 其 导 和 人 ,这 个 方法 的 参数 是 使 用 方 和 
模块 之 间 的 相对 路 径 。 

下 面 是 个 简单 的 示例 ， 在 本 书 配套 源码 的 ch05/07_commonjs-modules 文 件 夹 中 : 


// 这 个 文件 的 路 径 是 ' ./1ib/simple.js' 
module.exports = 'this is a really simple module'; 














// 这 个 文件 的 路 径 是 ' ./app.js' 
var simple = require('./lib/simple.js'); 


console.log(simple); 
// <- 'this is a really simple module' 
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这 种 模块 最 大 的 优点 之 一 是 ， 变 量 没 有 暴露 在 全 局 作用 域 中 ， 而 且 不 用 把 代码 放 在 闭 包 里 。 
就 算是 在 最 顶层 的 作用 域 中 声明 的 变量 (例如 前 面 代码 片段 中 的 simple 变 量 ), 其 作用 域 也 只 在 
变量 所 在 的 模块 中 。 如 果 想 开放 什么 ,需要 将 其 赋值 给 module .exports， 明 确 表明 意图 。 
读 到 这 里 , 你 可 能 觉得 我 介绍 CJS 有 些 跑题 了， 因为 与 CoffeeScript 和 TypeScript 一 样 , 浏览 器 
原生 并 不 支持 CJS。 稍 后 我 们 会 介绍 如 何 使 用 Browserify 把 CJS 模 块 编译 成 浏览 器 能 处 理 的 形式 。 
与 浏览 器 原来 的 处 理 方式 相 比 ， 使 用 CJS 有 以 下 好 处 : 
口 没有 全 局 变量 ， 认 知 负荷 少 ; 
口 开放 API 和 使 用 模块 的 过 程 都 很 简单 ; 
口 模拟 依赖 的 功能 让 测试 模块 变 得 更 容易 ; 
口 得 益 于 Browserify ， 能 使 用 npm 中 的 包 ; 
口 便于 测试 的 模块 化 ; 
口 如 果 使 用 Node.js 的 话 ， 便 于 在 客户 端 和 服务 器 之 间 共 用 代码 。 
5.4 节 会 详细 介绍 包 管 理 方案 (npm、Bower 和 Component )。 在 此 之 前 ， 我 们 要 先 介绍 管理 依 
赖 的 方式 ， 说 明 如 何 处 理应 用 使 用 的 各 个 组 件 ， 以 及 如 何 使 用 不 同 的 库 管 理 这 些 组 件 。 


5.3 ”管理 依赖 


这 里 我 们 要 讨论 两 种 依赖 的 管理 方式 : 内 部 依赖 和 外 部 依赖 。 我 所 说 的 内 部 依赖 ， 是 指 组 成 
程序 的 各 个 部 分 。 通 常 ， 内 部 依赖 和 实际 的 文件 是 一 一 对 应 的 , 不 过 一 个 文件 中 也 可 能 有 多 个 模 
块 。 我 说 的 模块 是 指 具 有 单一 职责 的 代码 ,可 以 是 服务 、 工 三 方法 、 模 型 或 控制 器 等 。 而 外 部 依 
赖 是 指 不 受 应 用 本 身 支 配 的 代码 。 你 可 能 拥有 包 ,， 或 者 包 就 是 你 开发 的 , 但 不 管 怎样 , 包 中 的 代 
码 完 全 在 其 他 仓库 中 。 

下 文中 我 会 介绍 什么 是 依赖 图 ， 然 后 介绍 管理 依赖 的 不 同方 式 ， 例 如 使 用 模块 加 载 器 
RequireJS 时 的 注意 事项 、CommonJS 提 供 的 便利 ， 以 及 AngularJS ( 谷歌 开发 的 MVC 框 架 ) 解析 
依赖 并 保持 模块 化 和 可 测试 性 的 绝妙 方式 。 


5.3.1 依赖 图 


编写 依赖 其 他 代码 的 模块 最 常 使 用 的 方式 是 在 模块 中 创建 所 依赖 对 象 的 实例 。 为 了 演示 这 种 
方式 ,请 允许 我 使 用 一 小 段 Java 代 码 , 这 段 代 码 很 容易 理解 .下 列 代码 清单 展示 的 是 UserService 
类 ,用 于 处 理 领 域 逻 辑 层 对 数据 的 请 求 。 这 个 类 能 使 用 任何 IUserRepository 类 的 实现 , 从 MySQL 
数据 库 或 Redis 存 储 等 仓库 中 读 取 数 据 。 这 个 代码 清单 在 本 书 配 套 源码 的 ch05/08_dependency-graphs 
文件 夹 中 。 


代码 清单 5.8 在 模块 中 创建 对 象 


public class UserService { 
private IUserRepository _userRepository; 
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public UserService () { 
_userRepository = new UserMySqlRepository(); 


} 


public User getUserById (int id) { 
return _userRepository.getById(id); 
} 
但 这 样 写 不 能 很 好 地 实现 我 们 的 需求 。 如果 服 务 可 以 使 用 任何 符合 接口 规范 的 仓库 , 为 什么 

要 像 这 样 硬 编码 UserMySqlRepository 呢 ?人 硬 编 码 依 赖 会 让 模块 更 难 测试 ， 因为 不 仅 要 测试 接 
口 ， 还 要 测试 具体 的 实现 。 更 好 的 方式 是 通过 构造 方法 传 入 依赖 ， 如 下 列 代码 清单 所 示 。 巧合 的 
是 , 这 种 方式 也 更 容易 测试 。 这 种 模式 通常 被 称 为 依赖 注入 , 其 实 就 是 把 对 象 的 实例 赋值 给 变量 。 
代码 清单 5.9 使 用 依赖 注入 模式 


public class UserService { 
private IUserRepository _userRepository; 












































public UserService (IUserRepository userRepository) { 
if (userRepository == null) { 
throw new IllegalArgumentException(); 
} 
_userRepository = userRepository; 


} 


public User getUserById (int id) { 
return _userRepository.getById(id); 
} 

} 

这 样 ， 我 们 就 可 以 按照 预定 的 方式 构建 服务 了 ， 因 为 使 用 任何 符合 IUserRepository 接 口 
规范 的 仓库 都 无 需 知道 具体 的 实现 方式 。 编 写 这 样 一 个 UserService 类 看 起 来 没什么 ， 不 过 一 
日 考虑 到 依赖 ， 以 及 依赖 的 依赖 时 ,事情 就 复杂 了 。 依赖 之 间 的 关系 叫 作 依赖 树 。 下 列 代码 片段 
很 可 能 无 法 引起 你 的 注意 : 

String connectionString = "SOME_ CONNECTION_STRING"; 

SqlConnectionString connString = new SqlConnectionString(connectionString); 

SqlDbConnection conn = new SqlDbConnection(connSstring); 


IUserRepository repo = new UserMySqlRepository (conn); 
UserService service = new UserService (repo); 


这 段 代码 展示 了 控制 反 转 ( Inversion of Control, 简称 IoC ) 模式 , "这 个 术语 有 点 书面 化 , 但 
实际 定义 的 概念 很 简单 。IoC 是 指 不 使 用 对 象 实例 化 或 引用 依赖 ， 而 是 通过 构造 方法 或 公开 的 属 
性 把 依赖 赋值 给 对 象 。 图 $-3 说 明了 使 用 IoC 模 式 的 好 处 。 

与 图 中 上 半 部 分 使 用 传统 的 依赖 管理 方式 编写 的 代码 相 比 ， 下 半 部 分 使 用 IoC 模 式 的 代码 更 
易于 测试 、 耦 合 度 更 低 ， 因 此 更 易于 维护 。 






















































































GD Martine Fowler 写 过 一 篇 介绍 控制 反 转 和 依赖 注入 的 文章 ， 地 址 是 http://bevacqua.io/bf/ioc。 
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IoC 框 架 用 于 解析 依赖 ， 解 决 处 理 依赖 过 程 中 的 各 种 问题 。 这 些 框 架 的 基本 目的 是 避免 使 用 
new 关 键 字 ， 全 都 交 给 IoC 容 器 处 理 。IoC 容 器 知道 如 何 实例 化 服务 和 仓库 等 任何 模块 。 本 书 不 会 
详 述 如 何 配置 常用 的 IoC 容 器 ， 但 若 想 次 和 学习， 需要 对 这 个 问题 有 个 整体 的 认识 。 

对 可 测试 性 来 说 ，loC 重 要 吗 ? 

说 到 底 ， 不 硬 编 码 依赖 的 重要 性 体现 在 单元 测试 中 ， 因 为 测试 时 能 轻易 模拟 依赖 ， 第 8 章 对 


此 会 作 介绍 。 





























传统 的 依赖 管理 方式 
自己 创建 实例 








TS 
this.basket = new Basket(); 
this.piece = new Piece(); 很 难 隔离 测试 ， 因 
} 为 无 法 创建 依赖 的 
桩 件 (stub)。 


new Thing!l); > 








控制 反 转 (loC) 
关注 点 分 离 得 更 开 ， 也 更 易于 测试 

















function Thing (Basket, piece) { 测试 变 得 容易 多 了 ， 因 
// 传 入 了 依赖 的 实例 为 轻易 就 能 提供 各 个 依 
] 赖 的 虚拟 实现 。 


new Thing(new Basket(), new Piece()); a. 


图 5-3 ”IoC 比 传统 的 依赖 管理 方式 提升 了 可 测试 性 


单元 测试 的 目的 是 判断 接口 是 否 能 按 预 期 工作 ， 无 论 具 体 的 实现 方式 是 什么 。 驭 件 ( mock ) 
是 实现 接口 的 桩 件 ， 不 过 它 只 会 通过 最 少 的 代码 实现 接口 规范 ， 除 此 之 外 什么 也 不 做 。 例如, 模 
拟 的 用 户 代 码 仓 库 可 以 始终 返回 同一 个 硬 编码 的 User 对 象 。 这 种 做 法 在 单元 测试 中 很 有 用 ， 因 
为 我 们 只 想 单 独 测试 Userservice 类 ， 而 无 需 了 解 内 部 细节 ， 也 不 用 知道 依赖 的 实现 方式 。 

至 此 , 我 们 已 讲 了 很 多 有 关 Java 的 内 容 。 但 这 些 和 本 书 有 什么 关系 呢 ?” 实 际 上 ， 如 果 想 写 出 
易于 测试 的 代码 , 一 定 要 理解 这 些 能 提升 可 测试 性 的 原则 。 你 可 能 不 认同 测试 驱动 开发 理念 , 但 
你 不 能 否认 的 是 ,如 果 编 写 代 码 时 不 考虑 可 测试 性 , 写 出 的 代码 会 更 难于 测试 ,对 客户 端 JavaScript 
代码 来 说 ， 复 杂 度 又 上 了 一 个 层次 ， 因 为 要 处 理 网 络 。 如 果 没 有 按照 第 2 章 介绍 的 方式 把 代码 打 
包 到 一 起 ， 就 不 能 立即 使 用 模块 。 

接 下 来 ,我 要 介绍 RequireJS。 这 是 一 个 异步 模块 加 载 器 ,与 杂乱 无 章 的 传统 方式 相 比 ， 这 种 
方式 更 好 。 
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5.3.2 ”介绍 RequireJS 





RequireJS 是 一 个 JavaScript 异 步 模块 加 载 器 (Asynchronous Module Loader， 简 称 AMD )， 用 于 
定义 模块 ， 指 定 依赖 。 下 列 代码 是 使 用 RequireJS 的 一 个 示例 ， 展 示 了 一 个 依赖 于 其 他 模块 的 模块 : 
require(['lib/text'], function(text) { 
Var result = text('foo bar'); 
console.log(result); 
// <- 'FOO BAR' 
j 
按 约定 ,1ipb/text 对 应 的 文件 路 径 是 ./lib/text.js, 这 是 相对 于 这 个 JavaScript 文 件 所 在 的 目录 
而 言 。 这 段 代码 会 请 求 lib/text.js 文 件 解释 其 中 的 代码 。 加 载 完 所 有 依赖 后 ， 会 调用 这 个 模块 中 的 
函数 ， 通 过 参数 把 依赖 传 入 这 个 模块 的 函数 中 。 这 个 过 程 和 5.3.1 节 中 的 Java 代 码 很 像 。 
'1ib/text ' 模 块 的 定义 如 下 所 示 : 
define([], function () { 


return function (input) { 
return input.toUpperCase(); 




















过 

3 

接 下 来 ， 我 们 来 分 析 RequireJS 和 其 他 依赖 管理 方式 相 比 有 什么 优 缺 点 。 

RedquireJS 的 优点 和 缺点 

'1ib/text ' 模 块 的 定义 使 用 了 一 个 空 数组 ， 因 为 它 没有 依赖 。 返 回 的 函数 是 '1ib/text' 
模块 提供 的 公开 接口 。RequireJS 有 以 下 几 个 优点 。 

口 自动 解析 依赖 图 。 不 用 再 花 时 间 排 序 script 标 签 了 ! 
口 支持 异步 加 载 模块 。 

口 在 开发 过 程 中 无 需 编 译 。 

口 易于 单元 测试 ， 因 此 只 需 加 载 需 要 测试 的 模块 。 

口 强制 使 用 六 包 ， 因 为 模块 定义 在 一 个 函数 中 。 

这 些 优点 确实 存在 , 而 且 可 谓 是 锦上添花 , 但 RequireJS 也 有 缺点 。 如 果 依 赖 的 包 没 按照 AMD 
规定 的 方式 编写 ,就 只 能 加 上 编译 这 一 步 , 打包 所 有 代码 。 如 果 不 把 模块 打包 在 一 起 ，RequireJS 
会 一 个 一 个 请 求全 部 依赖 ， 这 样 做 在 生产 环境 中 速度 太 慢 了 。AMD 的 多 数 优点 都 得 益 于 不 需要 
编译 ， 因 此 这 个 备 受 赞誉 的 依赖 图 解析 工具 有 以 下 缺点 。 

口 如 果 打 包 代码 ， 就 无 法 使 用 异步 加 载 功能 。 
口 开发 包 的 人 要 遵守 AMD 规 范 。 

口 AMD 的 包装 代码 搅乱 了 代码 。 

口 在 生产 环境 中 需要 编译 。 

口 发 布 环境 中 的 代码 和 本 地 开发 环境 不 一 致 。 

第 4 章 我 们 提 到 了 Grunt。 如 果 不 想 发 布 一 堆 没 有 优化 的 代码 , 那 就 在 构建 过 程 中 让 Grunt 编 译 
AMD 模 块 ， 这 样 就 不 用 异步 获取 这 些 模 块 了 。 
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若 想 让 Grunt 使 用 RequireJS 优 化 工具 r .js 编译 AMD 模 块 ，" 可 以 使 用 grunt-contrib- 
requirejs 包 。 这 个 包 可 以 把 选项 传 给 r .js。 下 列 代码 清单 是 相应 的 任务 配置 。 我 们 设置 了 每 
个 Grunt 目 标 都 会 用 到 的 默认 值 ， 然 后 调整 了 debug 目 标的 选项 。 这 样 做 是 为 了 遵守 DRY 原 则 ， 
避免 重复 编写 相同 的 配置 。 


代码 清单 5.10 ”使 用 Grunt 编 译 模块 
requirejs: { 
options: { 
name: ‘'app', 
baseUrl: 'js/amd', 
out: 'build/js/app.min.js' 
} 
debug: { 
options: { 
preserveLicenseComments: false, 
generateSourceMaps: true, 
optimize: 'none' 


} 

































































} 
release: {} 


} 

在 调试 模式 中 会 生成 一 个 源码 映射 文件 ,“ 这 个 文件 的 作用 是 帮助 浏览 器 把 执行 的 代码 映射 
到 编译 前 的 代码 。 这 个 文件 在 调试 时 很 有 用 ， 因 为 我 们 看 到 的 堆栈 跟踪 指向 的 是 源码 ， 而 不 是 编 
译 后 的 结果 。release 目 标 没有 进一步 配置 ， 只 是 使 用 前 面 提供 的 默认 值 。 看 一 下 本 书 配 套 源 码 
中 这 个 示例 的 目录 结构 ， 如 图 5-4 所 示 ， 可 以 更 形象 地 理解 这 些 配置 的 作用 。 


由利 日 10_requirejs-grunt 
























































， buildfirst chos 10_requirejs-grunt 





» "ode_ modules 3items 
Gruntfile.js 1.6kB 
package.json 462 bytes 
README.md 2.3kB 


test.html 365 bytes 




















图 5-4 ”在 Grunt 构 建 过 程 中 使 用 RequireJS 得 到 的 典型 目录 结构 











Qa 本 书 的 配套 源码 中 有 关于 如 何 编译 RequireJS 模 块 的 示例 ， 地 址 是 http://bevacqua.io/bf/requirejs。 
@@ 关于 源码 映射 的 更 多 信息 ， 请 阅读 HTML5Rocks 网 站 中 介绍 这 个 概念 的 文章 ， 地 址 是 http:/bevacqua.io/bf' sourcemap。 
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注解 本 书 的 配套 源码 中 有 一 个 说 明 如 何在 Grunt 中 集成 RequireJS 的 示例 ， 在 ch05/10 requirejs- 
grunt 文 件 夹 中 。 这 个 示例 详细 说 明了 RequireJS 构 建 任 务 中 各 选项 的 作用 。 





不 用 按照 特定 的 顺序 添加 script 标 签 是 个 很 好 的 功能 ， 其 实现 方式 有 很 多 种 。 如 果 你 完全 不 
买 AMD 的 账 ,或 者 对 其 他 方式 好 奇 ,请 继续 往 下 读 。 下 一 节 会 说 明 如 何在 浏览 器 中 使 用 CommonJS 
模块 。 


5.3.3 Browserify: 在 浏览 器 中 使 用 CJS 模 块 


5.2.3 节 说 明了 Node.js 包 使 用 的 模块 系统 CJS 的 好 处。 得 益 于 Browserify， 我 们 在 浏览 器 中 也 
能 使 用 CJS 模 块 。 虽 然 观点 各 异 ， 但 CJS 经 常 被 作为 AMD 的 替代 方式 而 使 用 。 因 为 我 们 始终 遵守 
构建 优先 原则 ， 所 以 编译 CJS 模 块 、 让 它们 能 在 浏览 器 中 使 用 并 不 是 难事 ， 只 需 在 构建 过 程 中 再 
添加 一 步 即 可 。 

除了 5.2.3 节 提 到 的 优势 ， 例 如 不 会 意外 创建 全 局 变量 ， 和 AMD 相 比 ，CJS 更 简洁 ， 不 会 搅乱 
代码 ， 定 义 模块 时 也 无 需 使 用 样板 代码 。 越 来 越 多 的 人 支持 使 用 CJS 编 写 模块 ， 因 此 npm 中 的 所 
有 包 默 认 都 支持 使 用 CJS 定 义 的 方式 使 用 。2013 年 ，npm 中 包 的 数量 呈 数 量 级 增长 〈10 倍 )， 截至 
本 书 成 书 之 际 ， 已 经 注册 了 超过 十 万 个 包 。 

Browserify 会 递归 分 析 应 用 中 的 所 有 reaquire() 调 用 ,然后 打包 这 些 文件 。 我 们 在 一 个 
<script> 标 签 中 引入 打包 好 的 文件 就 能 在 浏览 器 中 使 用 了 。 和 你 预想 的 一 样 ， 有 很 多 Grunt 捕 件 
能 把 CJS 模 块 编译 成 Browserify 包 ， 其 中 一 个 插件 就 是 grunt -browserify。 这 个 插件 的 配置 方 
式 和 第 2 章 介绍 的 插件 类 似 ， 我 们 要 提供 CJS 模 块 和 人口 文件 的 文件 名 ， 以 及 输出 文件 的 文件 名 : 

browserify: { 

debug: { 
fil eB (DLL/IS/aDD Ie Cj/apprjss 
options: { debug: true } 

Cr ‘ 
files: { 'build/js/app.js': 'js/app.js' } 


} 
} 


我 认为 使 用 这 种 方式 最 大 的 顾虑 不 是 Browserify, 而 是 要 学 习 require 和 CJS 模 块 的 模块 化 方 
式 。 幸 好 ， 在 第 一 部 分 配置 Grunt 任 务 时 ,我 们 已 经 使 用 了 CJS 模 块 ， 对 CJS 有 了 一 定 了 解 ， 也 有 
一 些 代 码 示例 可 以 参考 。 本 书 的 配套 源码 中 有 一 个 完整 可 用 的 示例 ， 在 ch05/11_browserify-cjs 文 
件 夹 中 , 说 明了 如 何 使 用 grunt -browserify 编 译 CJS 模 块 。 最 后 , 我 们 要 分 析 AngularJS 解 析 依 
赖 的 方式 ， 介 绍 管理 依赖 的 第 三 种 〈 也 是 最 后 一 种 ) 方式 。 





















































































































































5.3.4 Angular 管 理 依 赖 的 方式 


Angular 是 谷歌 开发 的 客户 端 模 型 -视图 -控制 器 (Model-View-Controller， 简 称 MVC ) 框架 。 
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第 7 章 会 介绍 另 一 个 流行 的 JavaScript MVC 框 架 


依赖 的 方式 oO 9 








Backbone。 这 一 节 我 们 来 看 一 下 Angular 解 析 


1. 在 Angular 中 使 用 依赖 注入 
Angular 提 供 了 一 个 相当 细致 的 依赖 注入 方案 ， 所 以 我 们 不 会 深入 讲解 细节 。 李 运 的 是 ， 这 
个 方案 抽象 得 很 好 ， 使 用 起 来 很 简单 。 我 用 过 很 多 不 同 的 依赖 注入 框架 ， 其 中 Angular 的 实现 方 





























式 是 最 自然 的 : 








与 Java 和 RequireJS 一 样 ， 你 甚至 感觉 不 到 是 在 使 用 依赖 注入。 下 面 看 个 实例 ， 这 





个 示例 在 本 书 配套 源码 的 ch05/12_angularjs-dependencies 文 件 夹 中 ,把 模块 声明 写 在 单独 的 文件 中 
十 分 便利 ， 如 下 所 示 : 


angular.module('buildfirst', []); 


随后 每 一 个 不 同 的 模块 ,例如 服务 或 控制 器 ,都 注册 为 这 个 你 事先 声明 过 的 模块 的 扩展 。 注 


省 





， 我 们 传 给 angular .module 函 数 的 是 一 个 空 数组 ， 所 以 上 述 模 块 不 依赖 任何 其 他 模块 。 


var app = angular.module('buildfirst'); 


app.factory ('textService', [ 


function 
return 


() { 


function (input) { 


return input.toUpperCase(); 


jt 
} 
1); 


注册 控制 器 也 很 简单 。 在 下 列 示例 中 ， 我 们 要 使 用 创建 好 的 textservice 服 务 。 这 和 


RequireJS 的 处 理 方式 类 似 ， 因 为 我 们 要 使 用 为 服务 起 的 名 称 : 


var app = angular.module('buildfirst'); 
app.controller('testController', [ 
'textService', 


function 


(text) { 


Var result = text('foo bar'); 
console.log(result); 


/= 
四 


'FOO BAR' 


下 面 简单 比较 一 下 Angular 和 RequireJS 。 

2. 比较 Angular 和 RequireJS 

与 RequireJS 不 同 ，Angular 不 是 作为 模块 加 载 器 而 运作 的 ， 它 关注 的 是 依赖 图 。 我 们 使 用 的 
每 个 文件 都 要 使 用 一 个 script 标 签 引 入 ， 而 AMD 则 能 自动 引入 。 

在 Angular 应 用 中 你 会 看 到 一 个 有 趣 的 现象 : 引入 脚本 的 顺序 不 是 那么 重要 。 只 要 在 第 一 位 
引入 Angular， 第 二 位 引入 声明 模块 的 脚本 ， 后 面 的 脚本 可 以 使 用 任何 顺序 引入 ，Angular 会 为 你 
处 理 各 脚本 的 顺序 。 在 众多 脚本 标签 中 ,最 顶端 要 像 下 面 这 样 写 , 这 也 是 要 在 单独 的 文件 中 声明 



































GD Angular 的 文档 详细 说 明了 依赖 注入 在 Angular 中 的 运作 方式 ， 地 址 是 http://bevacqua.io/bf/angular-di。 
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模块 的 原因 : 


<script src='js/vendor/angular.js'></script> 
ool A mil i nl ol 


其 余 的 脚本 ， 也 就 是 app 模 块 (或 者 你 起 的 其 他 名 称 ) 中 的 脚本 ， 可 以 使 用 任何 顺序 加 载 ， 
只 要 在 声明 模块 的 脚本 之 后 即 可 : 


去 站 二 二 


其 实 可 以 使 用 任何 顺序 1 





一 六 
<script src='js/app/testController.js'></script> 
<script src='js/app/textService.js'></script> 


下 面 简单 总 结 一 下 JavaScript 模 块 系统 的 现状 。 
3. 使 用 Grunt 打 包 Angular 组 件 
顺便 说 一 下 ， 配 置 构建 任务 时 可 以 直接 把 Angular 和 声明 模块 的 文件 放 在 前 面 ， 然 后 再 通 配 
其 他 文件 。 下 列 代 码 展示 了 如 何 配 置 某 个 构建 任务 ( 例如 grunt-contrib-concat 或 grunt- 
contrib-uglify 包 ) 的 files 属 性 : 





























files: [ 
'src/public/js/vendor/angular.js', 
'src/public/js/app.js', 
'srec/public/js/app/**/* .js" 

] 


你 或 许 不 想 投 入 时 间 学 习 AngularJS 这 样 功 能 全 面 的 框架 ， 也 不 想 为 了 使 用 依赖 解析 功能 而 
引入 整个 框架 。 在 结束 本 节 之 前 , 我 想 说 , 管理 依赖 没有 绝对 正确 的 方式 ， 因 此 我 才 介 绍 了 这 三 
种 方式 : 

口 RequireJS 模 块 ， 使 用 AMD 定 义 ; 
口 CommonJS 模 块 ， 然 后 使 用 Browserify 编 译 ; 
口 AngularJS， 自 动 解析 依赖 图 。 

如 果 你 的 项 目 用 的 是 Angular， 就 无 需 使 用 AMD 或 CJS， 因 为 Angular 提 供 了 足够 好 的 模块 化 
结构 。 如 果 不 使 用 Angular， 我 或 许 会 选择 CommonJS ， 主 要 是 因为 它 有 丰富 的 npm 包 可 以 使 用 。 

下 一 节 介 绍 几 个 其 他 的 包 管理 器 , 还 会 教 你 如 何 像 ppm 一 样 , 在 客户 端 项 目 中 使 用 这 些 管理 器 。 


5.4 理解 包 管 理 


包 管 理 器 的 缺点 之 一 是 常常 使 用 特定 的 结构 组 织 依赖 。 例 如 ，npm 把 安装 的 包 保存 在 node_ 
modules 文 件 夹 中 ，Bower 把 包 保 存在 bower_components 文 件 夹 中 。 构 建 优先 原则 的 一 大 优势 是 ， 
不 管 包 管理 器 如 何 组 织 依赖 都 没关系 , 我 们 在 构建 过 程 中 只 需 添加 这 些 文件 的 引用 就 行 , 根本 不 
用 管 包 在 什么 位 置 。 这 是 使 用 构建 优先 原则 的 一 个 重要 原因 。 

本 节 介 绍 两 个 流行 的 前 端 包 管理 需 : Bower 和 Component。 我 们 会 讨论 它们 各 自作 出 的 妥协 ， 
巴 它们 和 npm 作 比较 。 
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还 会 


or 
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5.4.1 Bower 简 介 


尽管 npm 是 很 棒 的 包 管 理 器 ， 但 它 无 法 满足 包 管理 方面 的 所 有 需求 。npm 中 几乎 所 有 包 都 是 
CJS 模 块 , 因为 CJS 在 Node 生 态 系 统 中 根深 带 固 。 虽然 我 选择 使 用 Browserify, 以 便 在 前 端 使 用 CJS 
规范 编写 模块 ， 但 Browserify 也 不 一 定 适合 所 有 项 目 。 

Bower 是 Web 项 目的 包 管 理 需 ， 由 Twitter 开发 。 它 对 内 容 不 作 限 定 , 图 片 、 样 式 表 或 JavaScript 
代码 都 可 以 放 进 包 里 。 现 在 我 们 应 该 已 经 习惯 了 npm 管 理 包 和 版 本 号 的 方式 ， 即 使 用 package.json 
清单 文件 Bower 则 使 用 bower.json 清 单 文件 , 和 package.json 文 件 的 格式 类 似 。 Bower 通 过 npm 安 装 : 



























































npm install -9 bower 


使 用 power 安 装 包 很 快 也 很 简单 ,我们 只 需 指 定 包 的 名 称 或 Git 远 程 代 码 仓 库 的 地 址 。 在 项 目 
中 ， 首 先 要 执行 bower init 命 令 。Bower 会 问 你 几 个 问题 ( 可 以 直接 按 回 车 键 ， 使 用 默认 值 即 
可 )， 随 即 创建 bower.json 清 单 文件 ， 如 图 5-5 所 示 。 






































7] version: 日 .日 

?>] descrtptton; 

] main file; 

] keywords 

"] authors: 

?] license: 

"] homepage: https://at b.com/bev st 

)] set currently installed components as dependencies? Ye 

?] add commonty ignored files to ignore list? Yes 

>] would you like to mark this package as private which prevents it from being accidentally published 
] would you like to mark this package as private whtch prevents tt from betng accidentally published 
0 the registry? No 





[3?] Looks 9ood? Yes 











图 $-5 ”执行 bower init 命令， 创建 bower.json 清 单 文件 








创建 好 清单 文件 后 , 安装 包 就 简单 了 。 下 述 示例 安装 的 是 Lo-Dash。 这 个 实用 库 和 Underscore 
类 似 , 不 过 活跃 度 更 高 。 执 行 以 下 命令 后 会 下 载 相应 的 脚本 ,然后 将 其 存储 在 bower_components 
目录 中 ， 如 图 5-6 所 示 。 

bower install --save lodash 

就 这 么 简单 ! 现在 ， 相 关 的 脚本 应 该 保存 到 bower_components/lodash 目 录 中 了 。 如 果 想 把 这 
个 依赖 加 入 构建 过 程 ， 只 需 把 相应 的 文件 添加 到 构建 模式 的 配置 中 。 和 之 前 一 样 ， 本 书 的 配套 源 
码 中 有 相应 示例 ， 在 ch05/13_bower-packages 文 件 夹 中 。 
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--Save angular 
git://github. con/angular /bower-angular .git#i,.2.5 
1.2,5 agatnst git://githyub.,com/angular /bower -angular .git#~1.2.5 
git://9ithub.con/angular /bower -angular .git#1.2.5 
1.2.5 against git://9ithub.com/angular /bower -angular .git#* 
version for git://9ithub,com/angular/bower-angyular .gtt#-1.2.5 
git://github.con/angular /bower-angular .git#~1.2.5 
https://github.con/angular /bower-angular /archive/v1.2.6-build.2888+sha.73c6671. tar .gz 
4 
git://github.con/angular /bower -angular .git#1.2.6-build.2688+sha.73c6671 
anguLarg#1.2.6-butLd.2999+sha.73c6671 





anguLart#1l.2.6.buttd.2z999+sha.73C6671 bower_components/angutLar 


图 5-6 ”执行 bower install --save 命 令 安装 依赖 ， 并 将 其 添加 到 清单 文件 








日 


TT 








Bower 可 算是 第 二 大 包 管 理 器 ， 有 近 两 万 个 包 ， 排 在 apm 之 后 。npm 有 超过 十 万 个 包 。 另 一 
个 包 管 理 需 Component 则 只 有 近 三 千 个 包 。 不 过 ，Component 用 于 管理 客户 端 应 用 使 用 的 包 ， 而 
且 提 供 的 管理 方式 更 模块 化 ， 也 更 全 面 。 下 面 介 绍 Component。 


5.4.2 ”大 型 库 ， 小 组 件 


像 jQuery 这 样 的 巨型 库 , 会 提供 你 所 需要 的 一 切 功 能 , 而 且 还 会 包含 你 不 需要 的 功能 。 例如 ， 
你 可 能 不 需要 jQuery 提供 的 动画 或 AJAX 功 能 。 对 这 种 要 求 来 说 ， 使 用 自 定义 的 构建 任务 剔除 
jQuery 中 的 部 分 功能 是 很 难 的 ， 也 没 必 要 自动 执行 这 个 操作 。 如 果真 这 样 做 了 ， 效 果 可 能 事 倍 功 
半 ， 和 jQuery“ 事 半 功 倍 ”( write less, do more ) 的 口号 相悖 。 

Component 这 个 工具 正 是 为 只 做 一 件 事 并 将 其 做 好 的 小 组 件 准 备 的 。 多 个 开源 项 目的 开发 者 
TJ Holowaychuk ，” 就 不 建议 使 用 一 个 大 型 库 满足 所 有 需求 ， 而 是 鼓励 使 用 多 个 小 组 件 ， 通 过 模 
块 化 的 方式 ， 恰 好 满足 自己 的 需求 ， 也 不 至 于 让 应 用 变 得 腑 肿 。 

按照 惯例 ， 使 用 Component 之 前 要 从 npm 中 安装 CLI 工 具 : 

npm install -g component 

安装 组 件 前 ， 我 们 要 创建 一 个 包含 有 效 的 JSON 对 象 的 内 容 最 简单 的 文件 。 创 建 方 式 如 下 : 

echo "{}" > component .json 


Component 安 装 组 件 ( 例如 Lo-Dash ) 的 方式 和 Bower 类 似 。 二 者 之 间 主 要 的 区 别 是 ,Component 
没有 Bower 那 样 专门 登记 包 的 注册 处 ， 而 是 使 用 GitHub 作 为 默认 的 注册 处 。 如 以 下 命令 所 示 ， 指 
定 GitHub 的 用 户 名 和 代码 仓库 名 就 能 安装 对 应 的 组 件 : 

component install lodash/lodash 

和 其 他 包 管 理 器 不 同 ，Component 总 是 会 更 新 清单 文件 ， 添 加 安装 的 包 。 而 且 ， 我 们 必须 在 
清单 文件 的 scripts 属 性 中 指定 入 口 点 : 

"scripts": ["js/app/app.js"] 

Component 还 有 一 个 不 同 于 其 他 包 管 理 器 之 处 ， 即 它 额 外 提供 了 一 个 构建 任务 。 这 个 任务 的 
作用 是 打包 安装 的 所 有 组 件 ， 拼 接 成 一 个 build.js 文 件 。 如 果 组 件 使 用 CommonJS 式 的 require 调 


























































































































































































































G@ Holowaychuk 的 博客 中 有 介绍 Component 的 文章 ， 地 址 是 http://bevacqua.io/bf/component。 
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用 ，Component 会 提供 必需 的 *eduire 函 数 。 

component build 

我 建议 你 看 一 下 本 书 配套 源码 中 的 两 个 示例 ， 以 便 更 好 地 理解 如 何 使 用 Component。 第 一 个 
示例 在 ch05/14_adopting-component 文 件 夹 中 ， 这 是 本 节 所 讲 内 容 的 完整 可 用 的 示例 。 
第 二 个 示例 在 ch05/15_automate-component-build 文 件 夹 中 ， 说 明 如 何 使 用 grunt-component- 
builgd 包 在 Grunt 任 务 中 自动 执行 这 个 构建 步骤 。 如 果 你 把 自己 编写 的 代码 也 视 为 组 件 ， 这 个 构 
建 步骤 就 尤为 重要 。 

最 后 我 来 总 结 一 下 前 面 介绍 的 各 种 模块 系统 ， 以 作为 你 选择 包 管 理 器 或 模块 系统 时 的 参考 。 


5.4.3 选择 合适 的 模块 系统 


Component 的 处 理 方式 有 其 合理 的 地 方 一 一 模块 化 代码 ， 把 一 件 事 做 好 ; 不 过 也 有 一 些小 缺 
陷 ， 例 如 在 执行 component instal1 命 令 后 还 有 一 个 不 必要 的 构建 步 又 。Component 应 该 像 npm 
一 样 ， 只 执行 component instal1 命 令 就 把 使 用 组 件 所 需 的 一 切 都 构建 好 。Component 的 配置 
也 很 神秘 ， 很 难 找到 文档 。 这 个 工具 的 名 称 也 是 个 巨大 的 缺点 ， 搜 索 “Component” 会 出 现 一 大 
推 不 相关 的 结果 ， 因 此 很 难 找到 需要 的 文档 。 

如 果 你 不 接受 CJS 提 出 的 概念 ， 可 以 使 用 Bower， 这 必然 要 比 自己 动手 下 载 代 码 再 放 到 合适 
的 目录 中 要 好 ， 也 不 用 自己 动手 升级 。Bower 适 合用 来 下 载 包 ， 但 对 模块 化 没有 什么 帮助 ， 这 是 
Bower 的 不 足 之 处 。 

如 果 你 接受 CJS 是 目前 为 止 最 简单 的 模块 格式 的 观点 ， 那 么 Browserify 是 可 用 的 最 佳 选择 。 
Browserify 不 内 艇 包 管理 器 是 件 好 事 ， 因 为 我 们 不 用 管 要 使 用 的 模块 在 哪个 源 中 ，npm、Bower 
和 GitHub 等 处 的 模块 都 能 使 用 。 

Browserify 提 供 的 机 制 既 能 把 别人 的 代码 转换 成 CJS 格 式 ,也 能 把 我 们 自己 开发 的 应 用 导出 为 
CJS 格 式 的 单个 文件 。 我 们 在 5.3.3 节 说 过 ，Browserify 能 生成 源码 映射 ， 在 开发 过 程 中 辅助 调试 。 
借助 Browserify ， 我 们 能 使 用 任何 原本 为 Node 开 发 的 CJS 模 块 。 

最 后 ,， AMD 模 块 或 许 适 合 跟 Bower 一 起 使 用 ， 因 为 彼此 没有 干扰 。 这 样 做 的 好 处 是 不 用 学 习 
CJS 处 理 模 块 的 方式 ,但 实际 上 要 学 的 也 没 多 少 。 

在 介绍 ECMAScript 6 对 JavaScript 语 言 作出 的 改动 之 前 ， 还 有 一 个 话题 要 讨论 一 一 循环 依赖 ， 
也 就 是 先 有 鸡 还 是 先 有 和 蛋 的 问题 。 


5.4.4 学 习 循环 依赖 


就 像 前 文 所 述 ， 循 环 依赖 是 一 个 先 有 鸡 还 是 先 有 和 蛋 的 问题 ， 处 理 起 来 很 坏 手 ,很 多 模块 系统 
干脆 不 支持 。 丁 的 目的 是 明确 回答 以 下 问题 。 
口 有 必要 使 用 循环 依赖 吗 ? 
口 有 什么 模式 能 避免 使 用 循环 依赖 ? 
口 前 面 介绍 的 依赖 管理 方式 是 如 何 处 理 循环 依赖 的 ? 
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如 果 组 件 相互 依赖 ， 那 就 代表 有 代码 异味 (code smell )， 可 能 暗示 着 代码 有 深层 次 的 问题 。 
处 理 循环 依赖 最 好 的 方式 是 , 彻底 避免 循环 依赖 。 有 几 个 模式 能 避免 使 用 循环 依赖 。 例 如 ， 如 果 
两 个 组 件 有 交互 , 可 能 表明 它们 需要 通过 一 个 共用 的 服务 通信 , 这样 做 更 容易 找 出 受 影响 的 组 件 ， 
为 其 编写 代码 。 第 7 章 介绍 使 用 Backbone 开 发 客户 端 应 用 时 会 说 明 几 种 方式 ， 避 人 免 这 种 先 有 鸡 还 
是 先 有 和 蛋 的 问题 。 

使 用 服务 作为 中 间 人 是 解决 循环 依赖 问题 的 多 种 方式 之 一 。chicken 模 块 可 能 依赖 egg 模 
块 ， 直 接 和 egg 模 块 通信 ， 但 如 果 egg 模 块 想 和 chicken 模 块 通信 ， 就 应 该 使 用 chicken 模 块 提 
供 的 回调 。 不 过 ， 更 简单 的 方式 是 分 别 创建 两 个 模块 的 实例 ， 让 一 个 chicken 实 例 和 一 个 egg 实 
例 相互 依赖 ， 而 不 让 模块 之 间 相 互 依赖 ， 从 而 避 开 这 个 问题 。 

我 们 还 要 注意 ,不 同 的 系统 会 使 用 不 同 的 方式 处 理 循环 依赖 。 如 果 试 图 在 Angular 中 解决 循 
环 依赖 ， 会 抛 出 异常 ， 因 为 Angular 没 有 提供 任何 模块 层次 的 循环 依赖 处 理 机 制 。 我 们 可 以 使 用 
Angular 提 供 的 依赖 解析 器 应 对 这 个 问题 .依赖 chicken 模 块 的 egg 模 块 使 用 的 依赖 解析 出 来 之 
后 ,使 用 chicken 模 块 时 就 能 获取 egg 模 块 。 

对 AMD 模 块 来 说 ， 如 果 你 定义 了 这 样 一 个 循环 依赖 ， 即 chicken 模 块 依赖 egg 模 块 ，egg 模 
块 依赖 chicken 模 块 ， 那么 调用 egg 模 块 中 的 函数 时 ，chicken 实 例 的 值 是 undefined。 如 果 模 
块 使 用 reaquire 方 法 定义 的 话 ，egg 模 块 可 以 获取 chicken 模 块 。 
CommonJS 处 理 循环 依赖 的 方式 是 ， 调 用 require 方 法 时 中 止 解析 模块 。 如 果 chicken 模 块 
依赖 egg 模 块 ， 会 停止 解释 chicken 模 块 ; 如 果 egg 模 块 依赖 chicken 模 块 ， 在 调用 require 方 
法 之 前 ， 只 会 部 分 解释 chicken 模 块 ， 调 用 reaquire 方 法 之 后 再 继续 解释 剩 下 的 代码 。 
ch05/16_circular-dependencies 文 件 夹 中 的 示例 说 明了 这 一 点 。 

最 重要 的 是 ,我们 要 把 循环 依赖 当成 瘟疫 ， 离 它 越 远 越 好 。 循 环 依赖 会 让 程序 变 得 更 复杂 ， 
而 且 各 种 模块 系统 没有 统一 的 处 理 方 式 。 我 们 可 以 使 用 更 有 条 理 的 方式 编写 代码 ,避免 出 现 循环 
依赖 。 

本 章 最 后 要 介绍 即将 发 布 的 ECMAScript 6 对 JavaScript 语 言 所 作 的 一 些 修 改 ， 以 及 这 些 改 动 
对 模块 化 组 件 设计 的 影响 。 









































































































































5.5 ” ECMAScript 6 新 功能 简介 

















你 可 能 知道 ，ECMAScript ( 简称 ES ) 是 定义 JavaScript 代 码 行为 的 规范 。ES6， 项 目 代 号 
了 Harmony ， "是 这 个 规范 期 竺 已 久 的 下 一 个 版 本 ， 即 将 发 布 。ES6 发 布 后 ， 我 们 会 从 对 JavaScript 
语言 所 作 的 众多 改进 中 受益 。 本 节 会 介绍 其 中 的 部 分 改进 。 写 作 本 书 时 ，Google Chrome 的 边缘 
版 本 Chrome Canary 和 Firefox Nightly 版 本 已 经 支持 了 Harmony 中 的 部 分 新 功能 。 在 Node 中 ， 启 动 
node 进 程 时 可 以 使 用 --harmony 标 记 启 用 ES6 中 新 的 语言 特性 。 




















Q@ 由 于 对 于 下 一 个 ECMAScript 版 本 应 该 包括 哪些 功能 , 各 方 分 歧 太 大 , 争论 过 于 激烈 , 因此 才 把 这 个 版 本 的 项 目 代 
号 命名 为 Harmony ( 和 谐 )。 一 一 译 者 注 
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请 注意 ，ES6 中 的 功能 实验 性 很 强 ， 随 时 会 变化 。 这 个 规范 尚未 定案 ， 因 此 对 本 节 讨 论 的 内 
容 要 留 点 神 。 我 稍 后 会 介绍 即将 发 布 的 这 一 版 语言 规范 中 新 的 概念 和 句法 。 现 在， 提议 加 入 ES6 
的 功能 应 该 不 会 变 了 ,不 过 具体 的 句法 可 能 会 有 调整 。 

谷歌 开发 了 一 个 有 趣 的 项 目 Traceur, 致力 于 推广 ES6。Traceur 能 把 ES6 编 译 成 ES3 ( 普遍 使 用 
的 版 本 )， 因 此 我 们 可 以 使 用 ES6 的 新 功能 编写 代码 ,然后 以 ES3 的 形式 执行 。 虽 然 Traceur 没 有 支 
持 Harmony 的 全 部 功能 ， 不 过 却 是 现 有 编译 器 中 功能 最 完善 的 。 















































5.5.1 在 Grunt 任 务 中 使 用 Traceur 


得 益 于 grunt -traceur 包 , 我 们 可 以 在 Grunt 任 务 中 使 用 Traceur。 我们 可 以 使 用 下 述 配 置 设 
置 Traceur。 这 样 配置 后 ，Traceur 会 分 别 编译 每 个 文件 ， 然 后 把 结果 保存 在 build 目 录 中 。 
traceur: { 
build: { 
入 芝 G 
dest: 'build/' 


} 
} 


背 助 这 个 任务 ， 我 们 可 以 编译 后 文中 一 些 使 用 ES6 编 写 的 示例 。 当 然 ， 本 书 的 配套 源码 中 有 
一 个 使 用 这 个 Grunt 任 务 的 可 用 示例 , 还 有 一 些 不 同 的 代码 片段 , 说 明 能 使 用 Harmony 做 什么 , 这 
些 代 码 都 在 ch05/17_harmony-traceur 文 件 夹 中 ， 你 最 好 是 浏览 一 下 。 第 6 章 和 第 7 章 还 有 一 些 代码 
使 用 了 ES6， 以 便 让 你 更 好 地 理解 即将 可 用 的 新 功能 。 

现在 我 们 知道 一 些 启用 ES6 新 功能 的 方式 了 ， 下 面 来 看 看 Harmony 处 理 模块 的 方式 。 



































5.5.2 Harmony 中 的 模块 


本 章 我 们 学 习 了 多 种 不 同 的 模块 系统 和 模块 化 设计 模式 。AMD 和 CJS 都 对 Harmony 的 模块 设 
计 产 生 了 影响 ,为 的 是 让 这 两 个 系统 的 支持 者 都 能 方便 使 用 它们 。Harmony 中 的 模块 有 单独 的 作 
域 ， 使 用 export 关 键 字 导 出 公开 API 中 的 成 员 ， 然 后 可 以 使 用 import 关 键 字 分 别 导 入 各 个 成 
员 。 我 们 还 可 以 明确 使 用 moaule 声 明 来 拼接 文件 。 

下 面 是 一 个 使 用 这 些 机 制 的 示例 。 我 使 用 的 是 写作 本 书 时 可 用 的 最 新 句法 ,“ 这 些 句法 是 由 
TC39 在 2013 年 3 月 的 一 次 会 议 中 制定 的 。TC39 是 一 个 技术 专家 委员 会 ， 负 责 推 进 JavaScript 语 言 
的 发 展 。 如 果 我 是 你 ， 我 不 会 太 关注 细节 ， 而 只 会 关注 总 体 思想 。 

首先 ， 我 们 要 定义 一 个 基本 的 模块 ， 导 出 一 个 变量 和 函数 : 


// math.js 
































— 
































export var pi = 3.141592; 


export function circumference (radius) { 





Q@ 对 ES6 中 模块 的 介绍 ， 请 访问 http://bevacqua.io/bf/es6-modules， 阅 读 相 关 文 章 。 
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return 2 * pi * radius; 


} 

若 想 使 用 导出 的 成 员 ， 要 在 import 语 句 中 将 其 导入 ， 如 下 列 代码 片段 所 示 。import 语 句 可 
以 选择 导入 模块 导出 的 一 个 成 员 、 多 个 成 员 或 所 有 成 员 。 下 列 语句 把 导出 的 cijrcumference 孙 
数 导 入 到 当前 模块 中 : 

import { circumference } from "math"; 

如 果 想 导 和 人 多 个 成 员 ， 要 在 成 员 之 间 加 上 逗号 : 

import { circumference, pi } from "math"; 

如 果 想 导入 模块 导出 的 所 有 成 员 , 并 将 其 赋值 给 一 个 对 象 , 而 不 是 直接 导入 到 当前 上 下 文中 ， 
要 使 用 as 句法 : 

import "math" as math; 

如 果 想 显 式 定义 模块 ， 而 不 是 隐 式 定义 ， 可 以 使 用 以 下 所 示 的 字面 形式 。 显 式 定 义 的 模块 ， 
在 发 布 过程 中 可 以 把 多 个 脚本 打包 成 一 个 文件 。 

module "math" { 


export // etc... 


二 

如 果 你 对 ES6 中 的 模块 系统 感 兴趣 , 可 以 阅读 我 博客 中 的 一 篇 文章 。 "这 篇 文章 包含 我 们 目前 
所 学 的 ES6 知 识 ， 还 前 明了 ES6 模 块 系统 的 扩展 性 。 一 定 要 记 住 ，ES6 的 句法 还 在 变化 。 讲 解 第 6 
章 之 前 ， 我 还 要 介绍 ES6 中 一 个 关于 模块 化 的 功能 let 关 键 字 。 


5.5.3 ”创建 块 级 作用 域 的 let 关 键 字 


在 ES6 中 ，1let 关 键 字 可 以 代替 vazr 语 句 。 我 们 在 5.1.3 节 说 过 ，vaz 声 明 的 变量 在 函数 作用 域 
中 。 而 let 声 明 的 变量 在 块 级 作用 域 中 ， 类 似 于 传统 编程 语言 中 的 作用 域 规则 。 声 明 变 量 时 ， 作 
用 域 提 升 是 个 重要 的 特性 ， 而 1et 关 键 字 能 规避 某 些 情况 下 函数 作用 域 的 局 限 性 。 
例如 ， 下 列 代码 片段 演示 的 就 是 一 个 典型 的 情况 : 根据 条 件 判断 要 不 要 为 变量 赋值 。 因 为 变 
量 会 提升 到 作用 域 的 顶端 ， 所 以 不 适合 在 if 语句 中 声明 变量 。 如 果 在 if 语句 中 声明 变量 ， 以 后 
知 想 在 el se 分 支 中 使 用 同名 变量 就 会 遇 到 问题 。 
function processImage (image, generateThumbnail) { 
var thumbnailService; 
if (generateThumbnail) { 


thumbnailService = getThumbnailService(); 
thumbnailService.generate (image); 




























































































return process (image); 








Q@ 对 ES6 中 模块 的 介绍 ， 请 访问 http://bevacqua.io/bf/es6-modules， 阅 读 该 文章 。 





图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


5.6 ”总结 109 





在 if 语句 中 使 用 let 关 键 字 则 不 会 出 现 这 个 问题 ， 我 们 不 用 担心 变量 会 溢出 这 个 代码 块 之 
外 ， 也 不 用 把 变量 的 声明 语句 和 赋值 语句 分 开 : 


function processImage (image, generateThumbnail) { 
if (generateThumbnail) { 
let thumbnailService = getThumbnailService(); 
thumbnailService.generate (image); 

















} 


return process (image); 


} 

在 这 种 情况 中 ， 两 种 写法 的 区 别 不 大 , 但 是 对 当前 的 JavaScript 实 现 来 说 ,使 用 var 声 明 变 
量 会 在 函数 作用 域 的 顶端 放置 很 多 变量 ,而 这 些 变量 可 能 只 会 在 一 个 代码 路 径 中 使 用 ， 因 此 这 
是 一 种 代码 异味 。 使 用 1et 关 键 字 把 变量 放 在 所 属 的 块 级 作用 域 中 ， 能 轻易 避免 出 现 这 种 代码 
异味 。 



























































5.6 总 结 


至 此 ， 我 们 介绍 完了 作用 域 和 模块 系统 等 知识 ， 归 结 起 来 有 以 下 几 点 。 

口 了 解 了 让 代码 自 成 一 体 、 明 确 代 码 的 作用 ， 以 及 隐藏 信息 ， 能 极 大 地 改进 接口 设计 。 

口 对 作用 域 、this 关 键 字 和 作用 域 提 升 有 了 更 深入 的 了 解 ， 这 在 无 形 中 有 助 于 设计 更 符合 

JavaScript 范 式 的 代码 。 

口 学 习 了 闭 包 和 模块 模式 ， 并 知道 了 模块 系统 的 工作 方式 。 

口 比较 了 CommonJS 、RequireJS 和 Angular 加 载 模块 的 方式 ， 以 及 它们 处 理 循 环 依赖 的 方式 。 

口 学 习 了 可 测试 性 的 重要 性 ( 第 8 章 会 进一步 说 明 )， 以 及 控制 反 转 模式 是 如 何 提升 代码 可 

测试 性 的 。 

口 讨论 了 如 何 借助 Browserify 在 浏览 器 中 使 用 npm 包 ， 如 何 使 用 Bower 下 载 依 赖 ， 以 及 如 何 

使 用 Component 编 写 符 合 Unix 原 理 的 模块 化 代码 。 

口 介绍 了 即将 发 布 的 ES6 中 的 新 功能 ， 例 如 模块 系统 和 1let 关 键 字 ， 还 学 习 了 如 何 使 用 
Traceur 编 译 需 玩 转 ES6。 

第 6 章 会 介绍 编写 JavaScript 异 步 代码 的 方式 。 你 会 学 习 如 何 避 开 常 见 误区 ， 还 会 通过 示例 学 

习 如 何 有 效 调 试 这 类 函数 。 我 们 会 介绍 多 种 编写 异步 印 数 的 模式 ， 例 如 回调 、 事 件 、Promise 对 

象 ， 以 及 即将 发 布 的 Harmony 中 的 生成 器 API。 
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本 章 内 容 

口 理解 并 跳出 回调 之 坑 

口 在 JavaScript 中 使 用 Promise 对 象 

口 使 用 异步 控制 流程 

口 学 习 基 于 事件 的 编程 方式 

口 使 用 Harmony ( ECMAScript 6 ) 中 的 生成 器 函数 




















第 5 章 强调 了 使 用 模块 化 方式 构建 组 件 的 重要 性 ， 介 绍 了 很 多 关于 作用 域 、 作 用 域 提升 和 闭 
包 的 知识 ， 这 些 是 有 效 理解 JavaScript 异 步 代码 的 基础 。 如 果 对 JavaScript 中 的 异步 开发 方式 没有 
充分 的 理解 ， 很 难 写 出 易于 阅读 、 重 构 和 维护 的 高 质量 代码 。 

JavaScript 开 发 新 手 经 常 遇 到 的 问题 之 一 是 “回调 之 坑 ”， 即 把 孔 数 般 套 在 函数 中 ， 导 致 代码 
难以 调试 ， 甚 至 无 法 理解 。 本 章 的 目的 是 阐明 如 何在 JavaScript 中 进行 异步 编程 。 

异步 执行 就 是 不 立即 执行 代码 ， 而 是 等 到 未 来 的 某 个 时 刻 再 执行 。 这 种 代码 不 是 同步 的 ， 
为 没有 连续 执行 。 虽 然 JavaScript 是 单线 程 的 , 但 用 户 触 发 的 事件 , 例如 点 击 、 超 时 或 AJAX 响 应 ， 
仍 能 创建 新 的 代码 执行 路 径 。 本 章 会 介绍 多 种 处 理 异步 流程 的 方式 , 并 且 会 统一 各 种 方式 的 编程 
风格 ， 让 异步 流程 能 容错 ， 且 处 理 起 来 无 痛 苗 。 和 第 5 章 类 似 ， 本 章 也 有 很 多 实用 的 代码 示例 ， 
供 你 参考 。 

首先 来 介绍 一 种 最 古老 的 处 理 模式 : 通过 参数 传人 回调 , 未 来 调用 回调 时 让 函数 的 调用 者 判 
断 发 生 了 什么 。 这 种 模式 叫 作 连 续 传 递 风 格 ， 是 异步 回调 的 基础 。 


6.1 使 用 回调 


我 们 经 常会 在 addEventListenerAPI 中 使 用 回调 ， 把 事件 监听 器 绑 定 到 DOM ( Document 
Object Model， 文 档 对 象 模型 ) 节点 上 。 触 发 这 种 事件 后 ， 会 调用 回调 函数 。 在 下 列 简 单 的 示例 
中 ， 点 击 文档 中 的 任意 位 置 后 ， 控 制 台 会 打印 一 句 话 : 
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document .body.addEventListener('click', function () { 
console.log('Clicks are important.'); 


六 
不 过 ， 点 击 事件 处 理 起 来 并 不 总 是 这 么 简单 。 有 时 写 出 的 代码 会 像 下 列 代码 清单 那样 。 


代码 清单 6.1 ”处理 回调 的 混乱 逻辑 





(function () { 
var loaded; 
function init () { 
document .body.addEventListener('click', function handler () { 


console.log('Clicks are important.'); 
handleClick(function handled (data) { 


if (data) { 
能 套 回调 的 过 程式 代 3 return processDatal(data, function processed (copy) { 
码 让 代码 难以 阅读 。 copy':append = true; 
done (copy); 
}3 
} else { 
reportError (function reported () { 
console.log('data processing failed.', err); 


a 


总 

}); 

function done(data) { 
loaded = true; 
console.log('finished', data); 


)) 0; 
这 段 代码 是 什么 意思 呢 ? 我 也 一 头 筋 水 。 我 们 被 拖 进 “ 回 调 之 坑 ” 了 。 所 谓 “ 回 调 之 坑 ” 









































? 6 


就 是 指 在 回调 中 嵌 套 和 缩 排 更 多 的 回调 ,导致 代码 逻辑 不 清 , 难以 理解 。 如 果 你 没 理解 代码 清单 





6.1 中 的 代码 ， 这 是 好 事 ， 你 没 必 要 理解 。 下 面 深入 探讨 这 个 话题 。 
6.1.1 跳出 回调 之 坑 


我 们 应 该 一 眼 就 能 理解 代码 的 逻辑 , 即便 是 异步 代码 也 应 该 如 此 。 如 果 花 的 时 间 超 过 几 秒 钟 ， 





那 可 能 就 说 明代 码 有 问题 。 读 了 第 $ 章 我 们 知道 ， 多 一 层 回调 就 多 一 层 作 用 域 ， 而 且 还 要 再 向 
缩 进 一 层 ， 通 着 我 们 买 更 宽 的 显示 器 。 总 之 ， 骨 套 回调 让 代码 更 难 理解 了 。 

回调 之 坑 不 是 突然 就 出 现 的 ， 而 且 也 是 可 以 避免 的 。 下 面 我 们 通过 一 个 示例 ( 在 本 书 配套 
码 的 ch06/01 callback-hell 文 件 夹 中 ) 说 明代 码 基 是 如 何 慢 慢 掉 进 回调 之 坑 的 。 假 设 我 们 要 通 
AJAX 请 求 获取 数据 ， 然 后 把 数据 显示 给 用 户 ， 就 得 使 用 一 个 虚构 的 httpb 对 象 简化 AJAX 请 求 
处 理 。 假 设 还 有 个 *ecord 变 量 ， 引 用 DOM 中 的 某 个 元 素 。 
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record.addEventListener('click', function () { 
Var id = record.dataset.id; 
var endpoint = '/api/vil/records/' + id; 


http.get (endpoint, function (res) { 
record.innerHTML = res.data.view; 
) 
| 辐 话 : 


这 段 代 码 尚 且 易 于 理解 ， 但 如 果 GET 请 求 成 功 后 需要 更 新 另 一 个 元 素 呢 ? 如 下 列 代码 清单 所 
示 ， 假 设 status 变 量 中 存储 的 是 一 个 DOM 元 素 。 
代码 清单 6.2 慢 慢 挥 入 回调 之 坑 


function attach (node, status, done) { 

















node.addEventListener('click', function () { 
var id = node.dataset.id; 
var endpoint = '/api/vil/records/' + id; 


http.get (endpoint, function (res) { 
node.innerHTML = res.data.view; 
reportStatus(res.status, function () { 

done (res); 

3 

和 


function reportStatus (status, then) { 
status.innerHTML = 'Status: ' + status; 
then(); 
} 
3 
} 


attach(record, status, function (res) { 
console.log(res); 


看 吧 ， 开始 出 现 问 题 了 。 回 调 骨 套 的 层级 每 增加 一 级 ,代码 的 复杂 度 就 会 升 一 级 ， 因 为 现在 
我 们 不 仅 要 维护 现 有 函数 的 上 下 文 ,， 还 要 维护 内 层 悉 套 回 调 的 上 下 文 。 试 想 一 下 , 在 真正 的 应 用 
中 ， 这 种 方法 的 代码 行 数 可 能 会 更 多 ， 我 们 就 更 难 记 住所 有 状态 了 。 

那么 如 何 避 免 慢 慢 掉 入 回调 之 坑 呢 ?我 们 只 需 减 少 回调 嵌 套 的 层级 就 能 降低 代码 的 复杂 度 。 


6.1.2 ” 解 开 混乱 的 回调 


解 开 代码 中 混乱 的 回调 有 多 种 方式 。 我 们 可 以 考虑 以 下 几 种 解决 方案 。 

口 为 匿名 函数 命名 。 以 增加 可 读 性 ， 表 明 函 数 的 作用 。 为 匿名 回调 命名 有 两 个 好 处 。 回 调 
的 名 称 可 以 表明 其 作用 ， 有 异常 时 还 有 助 于 追查 问题 ， 因 为 此 时 堆栈 跟踪 会 显示 函数 的 
名 称 ， 而 不 是 “anonymous function”( 匿名 函数 )。 调 试 时 ， 具 名 函数 更 便于 识别 ， 能 减 
少 让 人 头痛 的 问题 。 
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口 去 掉 不 必要 的 回调 。 例 如 上 述 示例 中 报告 状态 之 后 的 那个 回调 。 如 果 回 调 只 在 函数 的 末 
尾 执行 ， 而 且 不 是 异步 执行 的 ， 就 可 以 将 其 去 掉 。 之 前 回调 中 的 代码 可 以 直接 在 调用 函 





数 后 执行 。 








口 在 流程 控制 代码 中 使 用 条 件 语句 时 要 小 心 。 条 件 语 句 有 人 碍 于 理解 代码 ， 因 为 代码 可 能 丘 
新 的 路 径 上 执行 ， 我 们 要 考虑 代码 可 能 会 执行 的 所 有 路 径 。 流 程控 制 也 有 类 似 的 问题 。 
我 们 不 能 从 头 读 到 尾 ， 因 为 接 下 来 要 执行 的 代码 并 不 总 是 下 一 行 。 如 果 匿 名 回调 中 有 条 
件 语句 ， 理 解 代码 就 更 难 了 ， 所 以 我 们 要 避免 这 么 做 。6.1 节 的 第 一 个 代码 清单 很 好 地 演 
示 了 这 样 做 的 灾难 性 后 果 。 我 们 可 以 把 条 件 语 句 和 流程 控制 分 开 ， 规 避 这 个 问题 ; 也 可 
以 引用 函数 ， 而 不 引用 匿名 回调 ， 然 后 再 编写 条 件 语 句 。 

使 用 上 述 列表 中 建议 的 方法 ， 可 以 把 代码 清单 6.2 改 成 下 列 代码 清单 这 样 。 









































代码 清单 6.3 ”清理 混乱 


function attach (node, status, done) { 




















node.addEventListener('click', function handler () { 
“\、 具 名 函数 更 便于 
调试 。 


var id = node.dataset.id; 
var endpoint = '/api/vl/records/' + id; 


http.get (endpoint, function ajax (res) { 
node.innerHTML = res.data.view; 
reportStatus (res.status); 

done (res); 

二 


function reportStatus (code) { 
status.innerHTML = 'Status: ' + Code; 
} 
BB 
J 


attach(record, status, function (res) { 
console.log(res); 
上 二 


效果 不 错 ， 除 此 之 外 我 们 还 能 做 些 什么 呢 ? 


“\、 既然 这 个 方法 是 同步 的 ， 


就 没 必要 使 用 回调 了 。 


口 现在 reportstatus 函 数 没 什么 用 了 ,我 们 可 以 在 唯一 用 到 它 的 地 方 直接 写 入 函数 中 的 代 
码 ， 以 减少 脑力 开销 。 不 重用 的 方法 在 调用 的 地 方 可 以 换 成 方法 中 的 代码 ， 以 减少 认 知 














人 负 傈 。 

















口 有 了 时， 我 们 还 可 以 反 着 做 。 我 们 可 以 不 在 行内 声明 人 处理 点 击 事件 的 回调 ， 而 是 把 相应 的 
代码 写 人 具名 函数 中 , 减少 aqgdEventListener 的 代码 量 。 通常 ， 这 只 是 个 人 喜好 问题 ， 





不 过 当代 码 行 超过 80 个 字符 时 可 以 这 么 做 。 
像 这 样 改动 后 ， 得 到 的 代码 如 下 列 代码 清单 所 示 。 




















虽然 改动 前 后 代码 的 功能 是 一 样 的 , 但 修 





改 后 更 易于 阅读 。 为 了 更 好 地 理解 ， 请 将 下 列 代码 和 代码 清单 6.2 比 较 一 下 。 
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代码 清单 6.4 声明 为 单独 的 函数 


function attach (node, status, done) { 


function handler () + 
var id = node.dataset.id; 
var endpoint = '/api/vl/records/' + id; 


http.get (endpoint, updateView); 
} 


function updateView (res) { 
node.innerHTML = res.data.view; 
status.innerHTML = 'Status: ' + res.status; 
done (res); 


} 


node.addEventListener('click', handler); 


} 


attach(record, status, function done (res) { 
console.log(res); 


站 站 过 
采取 应 对 措施 后 ， 代 码 的 逻辑 变 清 晰 了 。 这 里 的 罕 门 是 ， 让 每 个 函数 尽量 短小 、 专 注 ,， 正 
如 我 们 在 第 $ 章 所 说 的 那样 。 我 们 还 要 为 函数 起 个 合适 的 名 称 ， 以 明确 函数 的 作用 。 判 断 什 么 
时 候 把 不 必要 的 回调 写 在 行内 ， 就 像 我 们 对 reportstatus 函 数 所 做 的 那样 ， 需 要 在 实践 中 积 
累 经 验 。 

总 之 , 只 要 能 提升 可 读 性 , 代码 写 得 长 一 点 也 没关系 。 可 读 性 是 编写 代码 时 需要 考虑 的 首要 
问题 ， 因 为 我 们 的 大 部 分 时 间 都 在 阅读 代码 。 在 进入 下 一 个 话题 之 前 ， 我 们 再 看 一 个 示例 。 


6.1.3 ”由 套 请 求 


在 Web 应 用 中 ，Web 请 求 经 常 要 依赖 其 他 AJAX 请 求 ， 因 为 后 端 可 能 不 会 在 一 次 AJAX 请 求 中 
就 提供 所 需 的 全 部 数据 。 例 如 ,我 们 可 能 需要 获取 用 户 的 所 有 客户 ， 为 此 ,我 们 必须 先 得 到 用 户 
的 ID ， 从 而 获取 用 户 的 电子 邮件 地 址 ,然后 需要 获取 该 用 户 所 在 的 区 域 , 最 后 再 获取 这 个 区 域 中 
该 用 户 的 客户 。 

我 们 通过 下 列 代码 清单 (在 本 书 配 套 源码 的 ch06/02_requests-upon-requests 文 件 夹 中 ) 来 看 看 
如 何 处 理 这 几 次 AJAX 请 求 。 


代码 清单 6.5 “在 藤 套 回调 中 处 理 AJAX 请 求 


http.get ('/userByEmail', { email: input.email }, function (err, res) { 
if (err) { donel(err); return; } 






















































































http.get('/regions', { regionId: res.id }, function (err, res) { 
if (Err) Cone(terr) Teturn 3} 


http.get('/clients', { regions: res.regions }, function (err, res) { 
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done(err, res); 
}); 

过 
站 


function done (err, res) { 
if (err) { throw err; } 
console.log(res.clients); 


} 
第 9 章 将 要 讲 到 分 析 REST API 服 务 的 设计 方式 ， 届 时 我 们 会 发 现 ， 需 要 这 么 多 步骤 才能 得 到 
所 需 的 数据 ， 通 常 表明 客户 端 代码 只 使 用 了 后 台 服 务 器 提供 的 API， 而 没有 为 前 端 提供 专门 的 
API。 在 我 说 的 这 种 情况 中 ， 服 务 器 最 好 能 根据 用 户 的 电子 邮件 地 址 提供 所 需 的 数据 ， 这 样 就 不 
用 在 客户 端 和 服务 融 之 间 多 次 往返 了 。 

图 6-1 对 这 种 客户 端 和 服务 器 之 间 多 次 往返 请 求 数据 的 方式 和 使 用 专 为 前 端 设计 的 API 作 了 
比较 。 从 图 中 可 以 看 出 ， 现 存 的 API 可 能 无 法 满足 前 端的 需求 ， 而 且 在 浏览 咒 中 要 先 处 理 和 输入 ， 
然后 再 交 给 API 处 理 。 更 糟 的 是 ， 可 能 还 要 发 起 多 次 请 求 ， 在 客户 端 和 服务 器 之 间 多 次 往返 才能 
得 到 所 需 的 结果 。 如 果 有 专门 的 API 处 理 我 们 的 请 求 ， 就 能 减少 向 服务 器 发 起 的 请 求 数 ， 降 低 服 
务 吉 的 负载 ， 去 掉 不 必要 的 往返 。 










































































现 有 的 API . 现 有 的 API 可 能 无 法 满足 需求 
.过 多 的 请 求 
. 客户 端 要 作 额 外 处 理 
执行 操作 ， 请 ES 
求 服务 器 中 ee ,= || 需要 在 浏览 器 中 处 理 
(OO 的 改 据 人 请求 | 数据 



















| 比 天 期 慢 









































http://bevacaua. io 请 求 可 能 还 要 等 待 有 新 数据 可 





专用 的 API . 专用 的 API 能 迎合 前 端的 需求 








“优化 的 结果 
* 数据 处 理 操作 较 少 





执行 操作 ， 请 
求 服务 器 中 
人 ) 的 数据 

























http://bevacqua.io 











图 6-1 在 现 有 的 API 和 专 为 前 端 设计 的 API 之 间 权 衡 





图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


116 第 6 章 理解 JavaScript 中 的 异步 流程 控制 方法 





假如 上 述 代 码 要 放 在 闭 包 或 事件 处 理 咒 中 , 缩 进 会 让 人 无 法 忍受 : 般 套 层级 太 深 了 ,导致 代 
码 特 别 难 理解 。 如 果 方 法 很 长 ， 情 况 就 更 粳 了 。 现 在 使 用 的 是 匿名 函数 ， 重 构 时 我 们 可 以 为 回调 
函数 起 名 ， 再 将 其 提取 出 来 ， 让 代码 更 易于 理解 。 

下 列 代码 清单 是 重 构 后 的 代码 ， 用 来 说 明 如 何 避 免 山 套 。 


vs :二 Ley 
代码 清单 6.6 不 再 相 套 
function getUser (input) { 
http.get ('/userByEmail', { email: input.email }, getRegions); 
































function getRegions (err, res) { 


if (err) { donel(err); return; } 
http.get('/regions', { regionId: res.id }, getClients); 
} 
在 每 个 回调 中 都 要 


function getClients (err, res) { 检查 错误 。 
if (err) { donel(err); return; } 
http.get('/clients', { regions: res.regions }, done); 





function done (err, res) { 
If (er { thriow err; 
console.log(res.clients); 


} 


从 上 述 代码 清单 我 们 可 以 看 出 , 重 构 后 代码 容易 理解 了 。 代码 的 逻辑 清晰 多 了 ,而且 都 在 同 
一 个 缩 进 层 级 。 你 可 能 注意 到 了 ,每 个 方法 都 有 检查 错误 的 代码 ， 这 是 为 了 确保 下 一 步 不 会 出 问 
题 。 在 接 下 来 的 几 节 中 ， 我 们 会 介绍 JavaScript 中 几 种 不 同 的 异步 流程 处 理 方式 ， 包 括 : 
口 使 用 回调 库 ; 
口 Promise 对 象 ; 




















口 生成 器 ; 
口 事件 发 射 器 。 

















我 们 还 会 学 习 每 种 方式 是 如 何 简化 错误 处 理 的 。 现 在 , 我 们 以 这 个 示例 为 例 , 说 明 如 何 避 免 
那些 检查 错误 的 代码 。 


6.1.4 ”处 理 异 步 流程 中 的 错误 


我 们 应 该 时 时 防范 和 应 对 错误 ， 而 不 是 将 其 忽略 ， 放 任 自流 。 话 虽 如 此 , 但 不 管 使 用 骨 套 的 
回调 还 是 具名 函数 ， 处 理 错 误 都 很 麻烦 。 不 过 ， 相 比 在 每 个 函数 中 都 添加 处 理 错 误 的 代码 ， 肯 定 
有 更 好 的 处 理 方式 。 

我 们 在 第 5 章 学 到 了 调用 函数 的 不 同方 式 ， 例 如 使 用 .apply、call 和 .bind 方 法 。 如 果 我 
们 能 使 用 下 列 代码 避免 重复 编写 检查 错误 的 代码 ,而 且 仍 能 检查 错误 , 但 只 在 一 处 检查 ， 岂 不 是 
更 好 ? 
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flow([getUser, getRegions, getClients], done); 

在 上 面 的 语句 中 ，f1ow 方 法 的 参数 中 有 一 个 由 函数 组 成 的 数组 ， 这 些 函 数 会 按 顺 序 执行 ， 
而 且 每 个 函数 都 有 一 个 next 参 数 ， 在 函数 执行 完毕 后 调用 。 如 果 传 给 next 回 调 的 第 一 个 参数 是 
“ 真 值 ”( JavaScript 方 言 ， 指 除 false、0、' '、null 和 ungdefined 之 外 的 其 他 值 )， 就 立即 调用 
done 方 法 ,中断 执行 flow 方 法 。 

next 回 调 的 第 一 个 参数 是 专门 用 来 处 理 错 误 的 ， 如 果 其 值 为 真 值 ， 代 码 就 会 短路 ， 直 接 调 
用 aone 方 法 。 否 则 ， 接 着 调用 数组 中 的 下 一 个 函数 ， 并 把 传 给 next 方 法 的 所 有 参数 都 传 给 这 个 
函数 ， 不 过 不 会 传人 错误 。 除 此 之 外 ， 还 会 传人 一 个 新 的 next 回 调 函 数 ， 以 便 继 续 链接 剩 下 的 
函数 。 实 现 这 种 设想 似乎 很 难 。 

首先 ， 我 们 得 让 f1ow 方 法 的 使 用 者 在 这 个 方法 执行 完毕 后 调用 next 回 调 ， 用 来 控制 流程 。 
我 们 要 提供 那个 回调 方法 ， 让 它 调用 数组 中 的 下 一 个 函数 ， 并 把 调用 next 回 调 时 使 用 的 参数 都 
传 给 下 一 个 函数 。 我 们 还 要 传人 一 个 新 naext 回 调 ， 调 用 下 一 个 函数 ， 以 此 类 推 。 

图 6-2 说 明了 我 们 要 实现 的 flovw 方 法 。 













































































异步 流程 传人 next () 的 所 有 参 
米 y 才 FR 公 人 给 = 
从 任务 1 开始 执行 数 都 会 传 给 下 






















































出 错 就 调用 done ( ) 方法 ， 
则 进入 下 一 步 








出 
1 
全 

















图 6-2 ”理解 异步 流程 方法 


在 实现 flow 方 法 之 前 ， 我 们 先 来 看 一 个 完整 的 使 用 示例 。 我 们 之 前 想 做 的 事情 是 ， 找 到 某 
个 用 户 的 所 有 客户 。 现 在 ， 我 们 不 用 每 一 步 都 检查 错误 了 ，flov 方 法 会 处 理 好 的 。 下 列 代码 清 
单 展示 了 如 何 使 用 flov 方 法 。 


代码 清单 6.7 ”使 用 flow 方 法 
flow([getUser, getRegions，getClients]，done); <~、、 flow() 方 法 的 参数 是 一 个 由 各 个 步 
又 组 成 的 数组 和 一 个 done() 回 调 。 


function getUser (next) { 
http.get('/userByEmail', { email: input.email }, Er 











各 步 执行 完毕 后 会 调用 next () 
function getRegions (res, next) { 回调 , 并 把 可 能 出 现 的 错误 和 结 
果 传 给 这 个 回调 。 


http.get('/regions', { regionId: res.id }, next); 
} 
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function getClients (res, next) { 
http.get('/clients', { regions: 
} 


res.regions }, next); 


注意 ,我 们 只 在 done () 回调 中 检查 错误 。 不 管 哪 
一 步调 用 next () 回调 时 传 入 了 错误 ，done() 回 


Se 调 都 会 收 到 那个 错误 ， 中 断 流程 。 


function done (err, res) { 
if (err) { throw err; } 
console.log(res.clients); 


} 


记 住 我 们 刚刚 讨论 过 的 这 些 内 容 ， 下 面 再 来 看 如 何 实现 flov 方 法 。 我 们 添加 了 一 个 条 件 判 
断 语 句 , 确保 在 任何 一 步 中 多 次 调用 next 回 调 都 不 会 产生 负面 影响 , 只 有 第 一 次 调用 有 效 。flow 
方法 的 实现 如 下 列 代码 清单 所 示 。 


代码 清单 6.8 ”实现 异步 串 行 的 Elov 方 法 














function flow (steps, done) { 存储 一 个 值 ， 用 于 判断 
function factory () { 六 是 否 已 经 调用 了 回调 
Var used; 、 田 AD : 冉 
使 用 工厂 函数 , 让 usea return function next () { 调用 一 次 后 ， 再 调用 
变量 在 每 一 步 中 都 是 if (used) { return; } 4/ 无 效 。 
局 部 变量 used = true; 
六 var step = steps.shift(); 还 有 其 他 步骤 吗 ? 把 参数 校 
IE (step) 2 正成 一 个 
获取 下 一 步 , 然后 将 其 从 Var args = Array.prototype.slice.call (arguments) 有 人 数组 。 
数组 中 删除 。 hif 
en 和 ee } 个 区 了 表示 钳 误 的 参数 ,外 
0 后 将 其 从 参数 中 删除 。 
如 果 有 错误 就 中 断 执行 step.apply (null, args); ae 
后 续 代码 。 } else { 向 参数 列表 中 添加 
i done.apply (null，arguments); 调用 这 一 步 , 并 传 一 个 结束 回调 。 
} 入 所 需 的 参数 。 
调用 done 回 调 ,无 需 > 
处 理 参数 。 } 创建 表示 第 一 步 的 
var start = factory (); < 函数 。 
Re 人、 执行 第 一 步 , 无 需 提 
供 任何 参数 。 
请 亲自 实验 一 下 ， 理 理 思路 ， 如 果 想 不 明白 ， 只 需 记 住 一 点 ，next () 方 法 的 作用 仅仅 是 返 


























回 一 个 只 能 用 一 次 的 函数 。 如 果 不 想 包含 那个 安全 措施 ， 可 以 在 每 一 步 都 重复 使 用 同一 个 函数 。 
不 过 这 样 做 的 话 ， 使 用 者 可 能 会 在 一 步 中 调用 next 回 调 两 次 ， 从 而 导致 编程 错误 。 

如 果 你 只 是 为 了 在 异步 流程 中 避免 掉 人 回调 之 坑 而 处 理 相 关 错 误 ， 那 么 维护 这 样 一 个 flow 
方法 ,让 它 跟 上 代码 的 变化 ,， 且 没有 缺陷 ,是 很 繁琐 的 。 幸 好 ， 聪 明 人 士 已 经 实现 了 这 种 处 理 方 
式 和 很 多 其 他 异步 流程 处 理 模 式 ， 开 发 出 了 一 个 名 为 async 的 JavaScript 库 。 很 多 流行 的 Web 框 架 
如 Express 都 内 置 了 这 个 库 。 我 们 会 在 本 章 介 绍 几 种 不 同 的 流程 控制 范式 ， 例 如 回调 、Promise 对 
象 、 事 件 和 生成 器 。 接 下 来 ， 我 们 来 介绍 async 库 。 
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6.2 使 用 async 库 


在 Node 圈 ， 多 数 开发 者 都 发 现 很 难 不 使 用 控制 流程 库 async。Node 平 台中 的 原生 模块 都 遵 
守 同 样 的 模式 : 函数 的 最 后 一 个 参数 是 回调 ， 而 且 回调 的 第 一 个 参数 是 错误 对 象 。 下 面 的 代码 片 
段 就 说 明了 这 种 模式 ， 它 使 用 Node 的 文件 系统 API 来 异步 读 取 文件 的 内 容 : 


require('fs') .readFile('path/to/file', function (err, data) { 


// 处 理 错误 ， 使 用 数据 





























}) 

async 库 提供 了 很 多 异步 流程 控制 方法 ， 和 6.1.3 节 我 们 构建 的 Elow 实 用 方法 很 像 。f1low 方 
法 的 作用 和 async .waterfall 方 法 差不多 。async 库 提供 了 很 多 这 样 的 方法 ， 如 果 正 确 使 用 ， 
就 能 简化 异步 代码 。 

async 库 可 以 从 npm 、Bower 或 GitHub 中 安装 。* 如 果 访 问 GitHub, 还 可 以 阅读 Caolan McMahon 
(async 库 的 作者 ) 编写 的 优秀 文档 。 

在 接 下 来 几 节 中 ， 我们 会 详细 介绍 异步 流程 控制 库 async， 讨论 可 能 遇 到 的 问题 ， 以 及 如 何 
使 用 async 库 解决 问题 ， 让 代码 对 所 有 人 包括 你 自己 ) 都 更 易于 阅读 。 首 先 来 介绍 三 个 稍微 不 
同 的 流程 控制 方法 : waterfall、series 和 parallel。 


6.2.1 使 用 瀑布 式 、 串 行 还 是 并 行 


若 想 掌握 在 JavaScript 中 处 理 异 步 流程 ， 最 重要 的 一 点 是 要 知道 有 哪些 不 同 的 工具 可 供 使 用 。 
本 章 的 目的 就 是 介绍 这 些 工 具 。 其 中 有 个 工具 使 用 的 是 常规 的 流程 控制 技术 。 
















































































口 你 要 执行 的 异步 任务 是 否 相 互 之 间 没 有 依赖 关系 ? 如 果 是 ,使 用 .parallel1 方 法 并 行 执 
行 这 些 任 务 。 

口 你 要 执行 的 任务 是 否 依赖 前 一 个 任务 ”如 果 是 ， 一 个 接 一 个 串 行 执行 这 些 任务 ， 但 仍 要 
异步 执行 。 

口 你 要 执行 的 任务 是 否 紧密 看 合 ? 如 果 是 ,使 用 瀑布 式 机 制 ， 把 参数 传 给 下 一 个 任务 。 前 

















面 讨论 的 层 琶 HTTP 请 求 就 非常 适合 使 用 瀑布 式 。 
图 6-3 进 一 步 比 较 了 这 三 种 方法 。 





Qasync 库 在 GitHub 中 的 地 址 是 https://github.com/caolan/async。 
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并 行 
任务 没有 前 置 条 件 ， 并 行 执行 














可 以 限定 并 行 数量 ， 在 指定 
时 则 内 最 多 8 执行 N 个 伍 


结果 的 顺序 
-一 async.parallel 和 执行 任务 


的 顺序 一 致 






































如 果 某 个 任务 执行 失败 ， 会 
向 a one (err, results) 


调 传 一 个 错误 对 象 

















了 丁 
依次 执行 任务 ， 且 一 次 执行 一 个 








如 果 某 个 任 务 执行 失败 ， 会 
向 Gone (err) 回调 传人 一 个 
错误 对 象 ， 而 且 不 会 继续 执 


行 后 续 任 务 
任务 A || 任务 B || 任务 C 一 


6 当 任务 有 前 置 条 件 时 可 以 这 样 
执行 ， 例 如 先 连接 二 然 
后 才能 启动 HTTP 服 务 器 


瀑布 式 
依次 执行 任务 ， 且 一 次 执行 一 个 




























结果 的 顺序 
和 执行 任务 
的 顺序 一 致 


async.series 















































让 得 到 的 结果 是 我 们 传 
各 果菜 个 任务 执行 失败 ， 会 向 。 给 前 一 个 i 
a done (err) 回调 传人 一 个 错 调 的 参数 
CC 给 next ( ) 回调 的 参数 误 对 和 而 且 不 会 继续 执行 
后 续 任 务 








async.waterfall | done | 


人 任务 有 依赖 时 可 以 这 样 执行 ， 因为 

参数 能 从 一 个 任务 传 到 下 一 个 任务 ， 错误 
例如 查询 数据 库 得 到 结果 后 ， 才 能 
中 ee 求 









































图 6-3 ”比较 async 库 中 的 并 行 、 串 行 和 瀑布 式 流 程控 制 方法 


从 图 中 可 以 看 出 ， 这 三 种 方法 之 间 存 在 着 细微 的 差别 。 下 面 详细 说 明 每 种 方法 。 
1. 并 行 
,但 仍 要 等 到 所 有 任务 都 执行 完毕 才能 进行 其 他 操作 , 那 就 最 
适合 并 行 执 行 这 些 任务 ,例如 ,在 你 为 了 泻 染 视 图 而 需要 获取 所 需 的 各 部 分 数据 时 就 要 这 样 执 行 。 
我 们 可 以 定义 一 个 并 行 数量 ， 指 明 最 多 同时 执行 多 少 个 任务 ， 而 其 余 的 任务 要 排队 等 候 。 
口 一 个 任务 执行 完毕 后 ， 再 从 队列 中 获取 男 一 个 任务 ， 直 到 队列 为 空 
口 向 每 个 任务 传人 一 个 特殊 的 next 回 调 ， 在 操作 结束 后 调用 。 
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口 传 给 next 回 调 的 第 一 个 参数 专门 用 于 处 理 错 误 ， 如 果 传 人 了 错误 对 象 ， 就 不 会 执行 后 续 
任务 (不 过 已 经 执行 的 任务 会 继续 执行 直至 结束 )。 
口 传 给 next 回 调 的 第 二 个 参数 是 前 一 个 任务 得 到 的 结 
口 所 有 任务 执行 完毕 后 ,调用 done 回 调 。 done 回 调 的 第 一 个 参数 是 错误 对 象 ( 如 果 有 的 话 )， 
第 二 个 参数 是 已 经 执行 的 所 有 任务 得 到 的 结果 ( 不管 执行 这 些 任 务 用 了 多 长 时 间 )。 

2. 串 行 

依 序 执行 是 为 了 把 相关 的 任务 连接 在 一 起 , 一 次 执行 一 个 任务 , 而 且 不 管 代码 是 否 在 主 循环 
之 外 异步 执行 。 串 行 流程 可 以 理解 为 并 行 数量 为 0 的 并 行 流程 。 其 实 ， 串 行 流 程 的 本 质 就 是 如 此 。 
串 行 执行 会 按照 相同 的 方式 处 理 next (er*，tresults) 和 aqone(err，tresults) 回 调 。 

3. 瀑布 式 

瀑布 式 和 依 序 执行 类 似 , 但 它 还 能 轻易 地 把 一 个 任务 的 参数 传 给 级 联 中 的 下 一 个 任务 。 如 果 
任务 必须 使 用 前 一 个 任务 的 结果 才能 开始 执行 , 那 就 最 适合 使 用 这 种 瀑布 式 方法 。 瀑 布 式 和 串 行 
方式 之 间 的 区 别 是 ，next 回调 中 表示 错误 的 参数 之 后 可 以 有 任意 多 个 表示 结果 的 参数 ， 例 如 
next (err, resultl1,， result2，result...n)。done 回 调 的 表现 则 完全 一 样 ， 会 把 传 给 最 
后 一 个 next 回调 的 所 有 参数 都 传人 其 中 。 

下 面 详 细 说 明 串 行 和 并 行 两 种 方式 。 

4. 串 行 流程 控制 

我 们 在 实现 flovw 方 法 时 已 经 说 明了 瀑布 式 。 下 面 看 一 下 和 瀑布 式 有 细微 差别 的 串 行 方式 。 
串 行 方 式 按 顺序 执行 各 个 步骤 ， 和 瀑布 式 一 样 , 一 次 执行 一 步 , 但 不 会 改动 每 一 步 执行 的 函数 的 
参数 。 每 一 步 执 行 的 函数 只 有 一 个 参数 一 next 回调 ， 期 待 的 参数 签名 为 (err，data)。 你 可 
能 会 想 :“ 这 有 什么 用 ? ”答案 是 ， 有 时 所 有 函数 都 具有 一 个 参数 ， 而 且 把 这 个 参数 当 作 回调 是 
很 有 用 的 。 下 列 代码 清单 演示 了 async .series 方 法 的 工作 方式 。 


代码 清单 6.9 使 用 async.series 方 法 
async.series([ 
function createUser (next) { 
http.put('/users', user, next); 
































































































































} 

function listUsers (next) { 
http.get ('/users/list', next); 

} 

function updateView (next) { 
view.update (next); 

} 


1 doney). 


function done (err, results) { 
// 处 理 错 误 
updateProfile(results[0]); 
synchronizeFollowers (results{[1]); 


} 
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有 了 时 需要 分 别处 理 每 一 步 得 到 的 结果 ,就 像 上 述 示例 那样 。 遇 到 这 种 情况 时 , 使 用 对 象 描述 
任务 比 使 用 数组 更 合理 。 如 果 这 么 做 ，done 回 调 中 的 results 参 数 就 是 一 个 对 象 ， 在 这 个 对 象 
中 ,属性 名 是 任务 的 名 称 ， 对 应 的 值 是 执行 任务 得 到 的 结果 。 这 听 起 来 很 复 森 ， 其 实 不 然 ， 我 们 
修改 一 下 前 一 个 代码 清单 ， 说 明 该 怎么 处 理 。 


代码 清单 6.10 ”使 用 done 回 调 


async.series({ 

user: function createUser (next) { 
http.put('/users', user, next); 

js 

list: function listUsers (next) { 
http.get ('/users/list', next); 

Fs 

View: function updateView (next) { 
view.update (next) ; 

} 


} x :done)3 





























function done (err, results) { 
// 处 理 错 误 
updateProfile(results.user); 
synchronizeFollowers (results.1ist); 
} 
如 果 任 务 只 是 调用 接受 参数 和 next 回 调 的 函数 ， 那 就 可 以 使 用 async .apply 方 法 来 简化 代 
码 ， 让 代码 更 易于 阅读 。apply 辅 助 方法 的 参数 是 你 想 调用 的 函数 和 传人 这 个 函数 的 参数 ,返回 
结果 是 一 个 函数 ， 其 参数 是 next 回 调 ， 而 且 返 回 的 这 个 函数 会 附加 到 参数 列表 的 末尾 。 以 下 代 


码 片段 中 的 两 种 写法 功能 是 一 样 的 : 
function (next) { 


http.put('/users', user, next); 


} 



























































async.apply (http.put, '/users', user) 
// <- [FuNnction] 


下 列 代 码 使 用 async .apply 方 法 简化 了 之 前 拟定 的 任务 流程 : 





async.series({ 
user: async.apply (http.put, '/users', user), 
list: async.apply (http.get, '/users/list'), 
View: async.apply (view.update) 

}, done); 


使 用 瀑布 式 不 可 能 做 到 这 种 优化 。async .apply 创 建 的 函数 只 有 一 个 参数 一 next 回 调 。 
在 瀑布 式 中 , 可 以 向 任务 传人 任意 多 个 参数 。 而 在 串 行 方式 中 只 会 传人 一 个 参数 一 一 next 回 调 。 

并 行 流程 控制 

除了 async.series 之 外 ，async 库 还 提供 了 asvync.parallel 方 法 。 并 行 执行 任务 和 串 行 
执行 完全 一 样 ， 只 不 过 不 是 一 次 执行 一 个 任务 ， 而 是 同时 执行 所 有 任务 。 并 行 流程 执行 的 速度 
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快 。 如 果 你 只 想 使 用 异步 流程 ， 而 没有 其 他 任何 需求 ， 那 就 最 适合 使 用 paralle1l 方 法 。 
async 库 还 提供 了 函数 式 方法 ， 用 于 遍历 列表 、 把 对 象 映射 到 其 他 值 上 或 排序 列表 。 接 下 来 
介绍 这 些 函 数 式 方法 ， 以 及 async 库 中 一 个 有 趣 的 任务 队列 功能 。 


6.2.2 ”异步 函数 式 任务 


假设 我 们 要 遍历 一 组 产品 标识 符 ， 并 通过 HTTP 请 求 获取 各 个 产品 的 对 象 表示 形式 。 这 是 使 
用 映射 的 绝 佳 场合 。 映 射 会 使 用 一 个 函数 修改 输入 ,得 到 输出 。 下 列 代码 清单 〈 在 本 书 配套 源码 
的 ch06/05_async-functional 文 件 夹 中 ) 展示 了 如 何 使 用 async .map 方 法 完成 这 项 操作 。 


代码 清单 6.11 使 用 映射 转换 输入 ,得 到 所 需 的 输出 


Ver TAS T2333 -18]: 














async.map (ids, transform, done); 


function transform (id, complete) { 
http.get('/products/' + id, complete); 
} 


function done (err, results) { 
// 处 理 错 误 
// results[0] 是 ids[0] 的 响应 ， 
// results[1] 是 ids[1] 的 响应 ， 
// 以 此 类 推 














调用 aone 时 ， 第 一 个 参数 可 能 是 错误 对 象 ， 如 果 是 ， 我 们 需要 处 理 错 误 ; 第 二 个 参数 是 结 
果 数 组 , 元 素 的 顺序 和 传人 async :map 方法 的 数组 中 的 元 素 顺序 一 致 。async 库 中 有 很 多 方法 的 
表现 和 map 方 法 类 似 ， 这 些 方法 的 参数 是 一 个 数组 和 一 个 函数 ， 在 数组 中 的 每 个 元 素 上 调用 这 个 
函数 ， 最 后 调用 aone 方 法 把 结果 传 给 它 。 
例如 ，async.sortBy 方 法 的 作用 是 原 地 (意思 是 不 会 创建 副本 ) 排序 数组 。 我 们 只 需 把 一 个 
表示 排序 条 件 的 值 传 给 这 个 函数 的 aone 回 调 即 可 async sortBy 方 法 的 用 法 如 下 列 代 码 清单 所 示 。 


代码 清单 6.12 ”排序 数组 


async.sortBy([1, 23, 54], sort, done); 


























function sort (id, complete) { 
http.get('/products/' + id, function (err, product) { 
completel(err, product ? product.name : null); 
}); 
} 


function done (err, result) { 

// 处 理 错 误 

// 得 到 的 结果 是 按 产 品名 称 排序 的 产品 ID 
} 
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map 和 sortBy 方 法 都 是 基于 each 方 法 实现 的 ， 使 用 的 是 并 行 方式 ;如果 使 用 相应 的 
eachSeries 版 本 ， 则 是 串 行 方式 。each 方 法 的 作用 很 简单 : 遍历 数组 ， 并 在 每 个 元 素 上 应 用 一 
个 函数 ; 遍历 结束 后 还 可 以 调用 aone 回 调 ， 如 果 遍 历 过 程 出 错 了 ， 会 向 这 个 回调 传 入 一 个 表示 


























错误 的 参数 。 下 列 代码 清单 是 一 个 使 用 async . each 方法 的 示例 。 
代码 清单 6.13 ”使 用 async .each 方 法 


async.each([2, 5, 6], iterator, done); 


function iterator (item, done) { 
setTimeout (function () { 
i (item SD ss 0) + 
done () ; 
} else { 
done (new Error('expected divisible by 2')); 
} 
}, 1000 * item); 
} 


function done (err) { 
// 处 理 错 误 
} 























async 库 中 还 有 更 多 这 种 函数 式 方法 ， 这 些 方法 的 作用 都 是 把 数组 转换 成 其 他 表示 方式 。 对 





其 他 函数 式 方 法 我 们 不 作 介绍 ， 不 过 我 建议 你 看 一 人 GitHub 中 的 大 量 文档 。” 


6.2.3 ”异步 任务 队列 





下 面 来 介绍 最 后 一 个 方法 async .queue。 这 个 方法 的 作用 是 创建 一 个 队列 对 象 ， 这 个 对 象 
可 以 串 行 执行 任务 ， 也 可 以 并 行 执行 任务 。async .aueue 方 法 有 两 个 参数 : 第 一 个 参数 是 处 理 





























队列 中 各 任务 的 函数 ， 这 个 函数 也 有 两 个 参数 ,一 个 是 任务 对 象 , 一 个 是 在 处 理 完 之 后 调 





调 ; 第 二 个 参数 是 并 行 数量 ， 指 明 同时 执行 多 少 个 任务 。 





























用 的 回 


如 果 并 行 数量 是 1， 则 队列 就 会 串 行 执行 ， 前 一 个 任务 执行 完毕 后 才 会 执行 下 一 个 。 下 列 代 











码 清单 (在 本 书 配 套 源码 的 ch06/06_async-queue 文 件 夹 中 ) 创建 了 一 个 简单 的 队列 。 





代码 清单 6.14 ”创建 一 个 简单 的 队列 


Var q = async.queue (worker, 1); 


function worker (id, done) { 
http.get('/users/' + id, function gotResponse (err, user) { 
if (err) { donel(err); return; } 


console.log('Fetched user ' + id); 
done () ; 

用 
} 





QD async 流 程控 制 库 在 GitHub 中 的 地 址 是 https://github.com/caolan/async。 
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要 使 用 这 个 队列 时 ， 可 以 引用 a 对 象 。 如 果 想 在 队列 中 添加 新 作业 ， 可 以 使 用 g.push 方 法 。 
我 们 要 向 这 个 方法 传人 一 个 任务 对 象 , 这 个 对 象 会 传 给 处 理 队列 的 函数 。 在 这 个 示例 中 , 任务 使 
用 数值 字面 量 表示 ， 不 过 也 可 以 使 用 对 象 其 至 函数 表示 。 我 们 还 要 向 q.push 方 法 传人 一 个 可 选 
的 回调 ， 在 作业 完成 后 调用 。 下 面 通过 代码 说 明 怎 么 使 用 gq.push 方 法 : 

Yar Ld 3 2 


q.push(id, function (err) { 
if (err) { 











console.error('Error processing user 23', err); 
} 
人 





就 这 么 简单 。 队 列 的 好 处 是 , 在 不 同 的 时 间 点 可 以 随时 添加 更 多 的 任务 , 而 且 队 列 仍 能 正常 
使 用 。 而 使 用 parallel 或 series 方 法 的 话 ， 实 现 的 操作 是 一 次 性 的 ， 后 续 无 法 增加 任务 。 关 于 
async 流 程控 制 库 , 最 后 还 要 探讨 一 个 话题 ; 制定 流程 和 动态 创建 任务 列表 一 一 这 两 个 功能 都 能 
提升 处 理 异步 流程 的 灵活 性 。 














6.2.4 制定 流程 和 动态 流程 


有 时 ， 我 们 需要 制定 更 复杂 的 流程 ， 其 中 : 

口 任务 B 依 赖 任务 A; 

口 然后 再 执行 任务 C; 

口 而 任务 D 可 以 和 前 面 三 个 任务 并 行 执 行 。 

等 到 这 四 个 任务 执行 完毕 后 ， 再 执行 最 后 一 个 任务 : 任务 E。 












































制定 异步 流程 
复杂 的 工作 流程 需要 深思 熟 虚 


任务 A 和 任务 B 需 要 采用 瀑布 式 方式 ”任务 A 和 任务 B 执 行 完毕 后 ， 要 串 行 执行 任 
执行 ， 因 为 任务 B 需 要 任务 A 的 结果 务 C。 任 务 C 依 赖 前 两 个 任务 ,但 不 直接 依赖 



























































任务 E 
任务 D 
任务 D 没 有 任何 依赖 ， 一 一 任务 E 依 赖 任务 D 和 任务 C， 所 以 必 
和 任务 A、B 和 C 一 起 并 行 执行 须 在 这 两 个 任务 执行 完毕 后 再 执行 



































图 6-4 剖析 一 个 复杂 的 异步 流程 。 提 示 : 在 脑海 中 要 按照 任务 的 需求 区 分 各 个 任务 
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图 6-4 展 示 了 这 个 流程 。 
口 任务 A (上 公交 车 ) 和 任务 B (付费 ) 需要 采用 瀑布 式 方式 执行 ， 因 为 任务 B 需 要 任务 A 的 





结果 。 
D 任务 A 和 任务 B 执 行 完 毕 后 ， 要 串 行 执行 任务 C(〈 到达 工 作 地 点 ) 任务 C 依 赖 前 两 个 任务 ， 
但 不 直接 依赖 。 





口 任务 D (读书 ) 没有 任何 依赖 ， 所 以 可 以 和 任务 A、B 和 C 一 起 并 行 执行 。 
D 任务 E (工作 ) 依赖 任务 C 和 任务 D ， 所 以 必须 在 这 两 个 任务 执行 完毕 后 再 执行 。 

这 个 流程 听 起 来 .看 起 来 都 比 实际 上 复杂 得 多 。 其 实 , 如 果 使 用 控制 流程 库 的 话 ,例如 async， 
我 们 只 需 编 写 一 些 相 互 依赖 的 函数 。 最 终 写 出 的 代码 可 能 类 似 于 下 列 示例 中 的 虚构 代码 。 这 里 ， 
我 使 用 了 6.2.1 节 介绍 的 async.apply 方 法 ,把 代码 变 得 简短 一 点 。 本 书 配套 源码 的 ch06/07_async- 
composition 文 件 夹 中 有 这 个 示例 ， 而 且 有 完整 的 文档 。 

async.parallel (I[ 
async.apply (async.series, [ 

async.apply (async.waterfall, [getOnBus, payFare]), 

getTowork 
J] 


readBook 
], dowork); 


像 这 样 制 定 流程 会 对 编写 Nodejs 应 用 很 有 帮助 。 这 个 流程 涉及 多 个 异步 操作 , 例如 查询 数据 
库 、 读 取 文件 或 连接 外 部 API， 不 过 这 些 操作 常常 十 分 复杂 ， 而 且 会 交织 在 一 起 。 

动态 制定 流程 

把 任务 添加 到 对 象 中 动态 创建 流程 , 让 你 无 需 使 用 流程 控制 库 就 能 拟定 原本 很 难 组 织 的 任务 
列表 。 这 是 JavaScript 这 种 动态 语言 独 具 的 特性 。 我 们 可 以 通过 动态 创建 函数 实现 这 一 点 ,下面 就 























































































































来 看 怎么 做 。 下 列 代码 清单 遍历 一 个 列表 ,把 每 个 元 素 映射 到 一 个 函数 上 ， 然后 使 用 各 个 元 素 进 
行 查询 。 
代码 清单 6.15 ”映射 并 查询 一 个 列表 

Var tasks = {}; 


items.forEach (function queryItem (item) { 
tasks[item.name] = function (done) { 
item.gquery (function queried (res) { 
done (null, res); 
}) 3 
小 
这 
function done (err, results) { 
// 结果 按 元 素 的 名 称 组 织 
} 


async.series (tasks, done); 
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async 库 的 轻 量 级 替代 品 

关于 在 客户 端 使 用 async 库 ， 有 几 点 需要 注意 。async 库 原本 是 为 Node.js 社 区 开发 的 ， 因 
此 没有 严格 测试 它 在 浏览 器 中 的 表现 。 

我 自己 开发 了 一 个 适合 在 浏览 器 中 使 用 的 版 本 ，contra。 我 写 了 大 量 单 元 测试 ， 每 次 发 
布 前 都 会 运行 这 些 测试 。 开 发 contra 库 时 ， 我 尽量 使 用 最 少 的 代码 实现 各 种 功能 。 它 只 有 
async 库 的 十 分 之 一 那么 大 ， 特 别 适 合 在 浏览 器 中 使 用 。contra 库 包含 async 库 中 的 各 个 方 
法 ， 而 且 还 提供 了 实现 事件 发 射 器 的 一 种 简单 方式 。 我 们 在 6.4 节 会 介绍 事件 发 射 器 。contra 
库 的 代码 托管 在 GitHub 中 ，" 使 用 npm 和 Bower 都 能 安装 。 














接 下 来 介绍 Promise 对 象 。Promise 是 一 种 异步 编程 方式 ， 把 函数 链接 在 一 起 ， 然 后 按照 约定 
的 方式 处 理 。 你 用 过 jQuery 的 AJAX 功 能 吗 ?” 如果 用 过 的 话 ， 你 就 会 知道 有 一 种 Promise 对 象 叫 
Deferred 对 象 。Deferred 对 象 的 实现 方式 和 ES6 中 官方 的 Promise 对 象 稍 有 不 同 ， 不 过 基本 类 似 。 


6.3 ”使 用 Promise 对 象 


Promise 对 象 是 一 种 很 有 前 途 的 标准 ， 而 且 是 ECMAScript 6 规范 草案 的 一 部 分 。 现 在 ， 如 果 
想 使 用 Promise 对 象 ， 可 以 借助 相关 的 库 ， 例 如 Q、RSsVP .js 或 when， 也 可 以 使 用 ES6 Promise 肛 
子 脚本 (polyfill )。? 腻 子 脚本 是 实现 期 望 语言 运行 时 原生 支持 功能 的 代码 。 这 里 提 到 的 Promise 
的 腻子 脚本 提供 的 是 对 Promise 对 象 的 支持 ， 因 为 Promise 对 象 是 ES6 原 生 支 持 的 功能 ， 使 用 腻子 
脚本 可 以 在 实现 前 一 版 ES 的 平台 中 使 用 Promise 对 象 。 

本 节 来 介绍 ES6 中 的 Promise 对 象 。 如 果 使 用 了 腻子 脚本 ， 现 在 我 们 就 能 使 用 Promise 对 象 。 
如 果 没 有 使 用 这 个 腻子 脚本 ， 而 是 其 他 实现 方式 ,代码 的 句法 可 能 会 稍 有 不 同 , 但 区 别 也 不 会 太 
大 ， 因 为 核心 概念 都 是 一 样 的 。 


6.3.1 ”Promise 对 象 基础 知识 


创建 Promise 对 象 时 要 传人 一 个 回调 函数 ， 这 个 回调 有 两 个 参数 : fulfil1 和 reject。 调 用 
fulfill 回 调 会 把 Promise 对 象 的 状态 变 成 fulfilled; 调用 reject 回 调 会 把 状态 变 成 
rejected。 稍 后 我 们 会 介绍 这 种 变化 有 什么 作用 。 下 列 代 码 声 明了 一 个 简单 的 Promise 对 象 ， 其 
作用 不 解 自 明 。 这 个 Promise 对 象 的 状态 有 一 半 的 几率 是 fulfilled， 一 半 的 几率 是 rejected。 


Var promise = new Promise(function logic (fulfill, reject) { 
if (Math.random() < 0.5) { 
fulfill('Good enough.'); 
} else { 
reject (new Error('Dice roll failed!')); 
} 
区 








































































































我 开发 的 contra 库 在 GitHub 中 的 地 址 是 https://github.com/bevacqua/contra。 
@) 支持 ES6 Promise 对 象 的 腻子 脚本 的 地 址 是 http:Vbevacqua.io/bfyjpromises。 
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你 可 能 注意 到 了 ，Promise 对 象 没 有 任何 与 生 俱 来 的 属性 ， 完 全 是 异步 执行 的 ， 因 此 可 用 来 
处 理 异 步 操作 。 混 用 同步 代码 和 异步 代码 时 ，Promise 对 象 就 派 得 上 用 场 了 ， 因 为 Promise 对 象 不 
在 乎 混 不 混用 。Promise 对 象 的 初始 状态 是 pendaing， 不 管 操作 是 失败 还 是 成 功 ，Promise 对 象 的 























状态 都 已 确定 ， 无 法 再 改变 了 。Promise 对 象 可 


1. Promise 对 象 的 后 续 回 调 





对 象 的 状态 确定 后 ， 会 根据 具体 的 状态 确定 执 


fulfilled, 或 者 已 经 处 于 fulfilled 状 态 , 会 调用 success 回 调 ; 如 果 状 态 








能 处 于 下 列 三 种 互 斥 的 状态 之 一 。 
口 pending (待定 ): 还 没 变 成 fulfilled 或 rejected 状 态 。 
口 fulfilled (完成 );: Promise 对 象 相关 的 操作 成 功 了 。 
Drejecteada (拒绝 )，Promise 对 象 相关 的 操作 失败 了 。 


行 哪个 回调 。 如 果 Promise 对 象 的 状态 


或 已 经 处 于 rejected 状 态 ， 则 会 调用 failure 回 调 。 


Promise 对 象 的 后 续 回 调 





Promise 对 象 的 状态 可 以 变 成 fulfilleq 或 rejected。Promise 对 象 的 状态 确定 后 ， 


p=new Promise(handler) 


创建 一 个 Promise 对 象 。handler 
有 两 个 参数 : fulfil1 和 reject 





fulfill (result) 把 Promise 对 
象 的 状态 标记 为 fulfilled， 触 
发 所 有 当前 和 后 续 的 .then 句 柄 


reject (reason) 把 Promise 对 象 
的 状态 标记 为 rejected， 触 发 所 
有 当前 和 后 续 的 .catch 句 柄 





图 6-5 Promise 对 象 的 后 续 回 调 





p.then(consequence) 
p.then(consequence) 
p.then(consequence) 


调用 p .then 并 传人 一 个 函数 的 目 
的 是 注册 一 个 回调 ， 在 Promise 对 
象 执行 成 功 时 执行 。 如 果 Promise 




















对 象 已 经 处 于 fulfilled 状 态 ， 
就 立即 执行 这 个 回调 

















p.catch(consequence) 
p.catch(consequence) 








调用 p.catch 并 传 入 一 个 函数 的 目 
的 是 注册 一 个 回调 ， 在 Promise 对 
象 执 行 失败 时 执行 。 如 果 Promise 
对 象 已 经 处 于 rejected 状 态 ， 就 
立即 执行 这 个 回调 

















会 调用 后 续 的 回调 


fulfilled 
状态 


rejected 


状态 





创建 Promise 对 象 后 ,我 们 可 以 通过 then (success,， failure) 方 法 为 其 提供 回调 。Promise 


变 成 了 


变 成 了 rej ected, 


图 6-5 说 明了 Promise 对 象 的 状态 如 何 变 成 rejected 或 fu1fil11ed， 以 及 如 何在 Promise 对 象 





执行 完毕 后 调用 后 续 的 回调 。 








图 6-$ 中 有 几 个 地 方 要 注意 。 首 先 要 记 住 ， 创 建 Promise 对 象 时 要 传人 两 个 回调 : fulfi11 和 
reject。 这 两 个 回调 在 Promise 对 象 的 状态 确定 后 调用 。 调 用 pb .then (success，fail) 时 ， 如 
果 Promise 对 象 的 状态 是 fulfilled， 会 执行 success; 如 果 Promise 对 象 的 状态 是 rejected， 
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则 执行 fail。 注 意 ， 这 两 个 回调 都 是 可 选 的 ， 我 们 还 可 以 使 用 句法 糖 p.catcn(fail) 代 替 
p.then(null, fail)。 

下 列 代 码 清单 在 前 一 个 示例 的 基础 上 使 用 then 调 用 了 后 续 的 回调 。 这 个 示例 在 本 书 配 套 源 
码 的 ch06/08_promise-basics 文 件 夹 中 。 


代码 清单 6.16 ”在 Promise 对 象 上 调用 后 续 回 调 
Var promise = new Promise(function logic (fulfill, reject) { 
if (Math.random() < 0.5) { 
fulfill('Good enough.'); 
} else { 
类 似 地 ，reject 回 调用 A reject (new Error('Dice roll failed!')); 
于 拒绝 处 理 操作 , 传 入 的 


Ns 然后 可 以 使 用 .then 方 法 链 
_/ 接 处 理 成 功 后 执行 的 回调 。 





ee 创建 Promise 对 象 时 , fu1fi11 
回调 用 于 处 理 传 入 的 任何 值 。 


promise.then(function success (result) { 
console.log('Succeeded', result); 


}: funetion fail (reason) 攻 .then 方 法 的 第 二 个 参数 是 可 选 的 ， 这 


| J log('Rejected', reason); 个 参数 指定 的 回调 在 处 理 失 败 时 执行 


promise.then 方 法 想 调 用 多 少 次 就 可 以 调用 多 少 次 , 而 且 Promise 对 象 的 状态 确定 后 会 调用 
正确 分 支 (成 功 或 失败 ) 中 的 所 有 回调 ,而 且 会 按照 添加 回调 的 顺序 调用 。 如 果 有 异步 代码 ， 例 
如 调用 了 setTimeout 或 XMLHttpRequest, 在 Promise 对 象 执行 完毕 之 前 , 不 会 执行 依赖 Promise 
对 象 输出 结果 的 回调 ， 如 下 列 代 码 清 单 所 示 。 一 旦 Promise 对 象 的 状态 确定 了 ， 传 给 p.then 
(success，fail) 或 o.catch(fail) 的 回调 会 立即 执行 ， 但 具体 执行 哪个 回调 要 视 情 况 而 定 : 
只 有 Promise 对 象 的 状态 为 fultilled 时 才 会 执行 success 回 调 ， 只 有 Promise 对 象 的 状态 为 
rejected 时 才 会 执行 fail 回 调 。 


代码 清单 6.17 执行 Promise 对 象 


Var promise = new Promise(function logic (fulfill, reject) { 
console.log('Pending...'); 





setTimeout (function later () { 
if (Math.random() < 0.5) { 
fulfill('Good enough.'); 
} else { 
reject (new Error('Dice roll failed!')); 
} 
ye 1 000) 
区 


promise.then(function success (result) { 
console.log('Succeeded', result); 

}, function fail (reason) { 
console.log('Rejected', reason); 

上 下) 


除了 在 Promise 对 象 上 多 次 调用 .then 方 法 创建 不 同 的 分 支 外 , 还 可 以 把 回调 链接 在 一 起 , 在 
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每 个 回调 中 修改 得 到 的 结果 。 下 面 介绍 链接 的 Promise 对 象 。 

2. 在 链接 的 Promise 对 象 中 转换 数据 

现在 要 讲 的 内 容 很 难 理解 ， 所 以 我 们 一 步 步 来 。 链 接 回 调 时 ， ele 和 吉 果 传 给 
后 面 的 回调 。 在 下 列 代 码 清 单 中 ，Promise 对 象 创建 一 个 字符 串 ， 第 一 个 回调 把 这 个 字符 串 解析 
成 JSON 对 象 ， 第 二 个 回调 打印 这 个 JSON 对 象 中 builafirst 字 段 的 值 ， 确 定 是 不 是 true。 


代码 清单 6.18 ”使 用 数据 转换 链 


Var promise = new Promise(function logic (fulfill) { 


fuULTfiLL( Tt{"buildfirest": trie ys 在 这 个 示例 中 , Promise 对 象 
3) 











始终 返回 一 个 JSON 字 符 串 。 
promise 

.then(function parse (value) { By 这 个 方法 把 JSON 字 符 
return JSON.parse (value); 串 解析 成 一 个 对 象 

} 

.then(function print (value) { print 回 调 的 参数 是 
console.log(value.buildfirst); parse 回 调转 换 后 得 
A 到 的 JSON 对 象 。 


3 


链接 多 个 回调 以 转换 前 面 的 值 是 很 有 用 的 , 但 如 果 链 接 的 是 异步 回调 就 没什么 用 了 。 那么 如 
何 链接 Promise 对 象 来 处 理 异 步 任 务 呢 ? 请 看 下 一 节 。 


























6.3.2 ”链接 Promise 对 象 


回调 除了 可 以 返回 值 之 外 , 还 可 以 返回 其 他 Promise 对 象 。 返回 Promise 对 象 有 个 有 趣 的 效果 : 
链 中 的 下 一 个 回调 会 等 到 前 一 个 Promise 对 象 执行 完毕 后 再 调用 。 在 下 一 个 示例 中 ， 我 们 要 请 求 
GitHub 的 API 获 取 一 组 用 户 ， 然 后 再 获取 其 中 一 个 用 户 的 一 个 项 目 名 称 。 为 此 我 们 需要 事先 创建 
一 个 Promise 封 装 需 ， 处 理 XMLHEtpReaquest 对 象 。xMLHEtpPRedquest 是 浏览 器 的 原生 API， 用 于 
处 理 AJAX 请 求 。 

1. 一 个 空 的 AJAX 请 求 

本 书 不 会 详细 说 明 xMLHttpRequest 的 用 法 , 不 过 下 列 代码 的 作用 不 解 自 明 。 下列 代码 清单 
展示 了 如 何 使 用 最 少 的 代码 发 起 AJAX 请 求 。 


代码 清单 6.19 ”发 起 AJAX 请 求 
Var xhr = new XMLHttpRequest () ; 
xhr.open('GET', endpoint); 
xhr.onload = function loaded () { 
if (xhr.status >= 200 && xhr.status < 300) { 
// 获取 响应 
} else { 
// 报告 错误 
} 
过 


hr ONerror = FuUnetiom -errored.. () 
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// 报告 错误 
ee 
xhr.send(); 
我 们 传人 了 一 个 端点 (CURL )， 把 HTTP 方 法 设 为 GBT， 然 后 异步 处 理 返回 的 结果 。 现 在 是 
述 处 理 AJAX 请 求 的 代码 改写 成 Promise 对 象 的 绝 佳 时 机 。 


2. 使 用 Promise 对 象 处 理 AJAX 请 求 
其 实 我 们 不 用 作 什 么 修改 ， 只 需 把 处 理 AJAX 请 求 的 代码 放 到 Promise 对 象 中 就 可 以 了 ,然后 


再 根据 情况 调用 resolve 或 zeject 回调 - 下 列 代 码 清单 是 get 函数 的 一 种 实现 方式 , 这 个 函数 使 
用 Promise 对 象 访问 XHR 对 象 。 


代码 清单 6.20 ”使 用 Promise 对 象 处理 AJAX 请 求 
function get (endpoint) { 
function handler (fulfill, reject) { 
Var xhr = new XMLHttpRequest (); 
xhr.open('GET', endpoint); 
xhr.onload = function loaded () { 
if (xhr.status >= 200 && xhr.status < 300) { 


如 果 状态 码 在 200~299  / 忆 fulfill (xhr.response); 

















车 








过 



































之 间 ， 则 使 用 fu1£i11 } else { 
回调 处 理 响 应 。 reject (new Error (xhr.responseText)); ER 否则 使 用 错误 对 象 拒 
) } 绝 这 个 Promise 对 象 。 
xhr.onerror = function errored () { 
reject (new Error('Network Error')); EE 出 现 网 络 错误 (例如 
请 求 超时 ) 时 也 拒绝 。 
xhr.send(); 


} 


return new Promise(handler); 


. 
有 了 这 个 get 函数 ， 连 续 调用 多 个 回调 就 轻而易举 了 。 下 列 代 码 使 用 我 们 实现 的 get 方 法 发 
起 一 个 AJAX 请 求 。 注 意 , 我 们 既 通 过 Promise 对 象 执行 了 异步 操作 ， 叉 使 用 then 方 法 执行 了 同步 
操作 ， 即 转换 数据 。 


get ('https://api.github.com/users') 

.catch(function errored () { 
console.log('Too bad. That failed.'); 

} 

.then (JSON.parse) 

.then (function getRepos (res) { 
var url = 'https://api.github.com/users/' + res[0] .login + 
return get (url) .catch(function errored () { 

console.log('Oops! That one failed.'); 


}); 
} 
.then (JSON.parse) 
.then(function print (res) { 
console.log(res[0] .name); 


je 


'/repos'; 
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我 们 也 可 以 把 JsSoN.parse 方 法 写 进 get 函 数 中 ,不 过 这 也 许 是 说 明 如 何 使 用 Promise 对 象 同 
时 处 理 异 步 和 同步 操作 的 好 机 会 。 

如 果 我 们 想 执行 类 似 6.2.1 节 中 async.waterfal1 能 执行 的 操作 ,那么 这 样 做 就 是 很 可 行 的 ， 
这 样 前 一 个 任务 的 结果 会 传 给 下 一 个 任务 。 如 果 想 实现 async 库 提供 的 其 他 流程 控制 方式 ， 应 该 
怎么 做 呢 ? 请 继续 往 下 读 。 




















6.3.3 ”控制 流程 


使 用 Promise 对 象 控制 流程 大 致 和 使 用 流程 控制 库 ( 例如 async ) 一 样 简单 。 如 果 想 等 到 一 系 
列 Promise 对 象 执行 完毕 之 后 再 进行 其 他 操作 ， 就 像 async.parallel 那 样 ， 可 以 把 这 些 Promise 
对 象 放 到 Promise .al1 方 法 中 ， 如 下 列 代码 清单 所 示 。 


代码 清单 6.21 使 用 Promise 对 象 实现 暂停 
function delay (t) { 
function wait (fulfill) { 
setTimeout (function delayedPrint () { 
console.log('Resolving after', t); 
fulfill(t); 
jE 
} 


return new Promise (wait); 

















} Promise.all 会 等 所 有 Promise 对 
a 象 的 状态 都 变 成 fulfilled 之 后 
ed 强 调 。 
.all([delay (700), delay (300), delay (500)]) 24/ 再 执行 后 续 回调 


.then(function complete (results) { 
return delay (Math.min.apply (Math, results)); 
Fs 


在 上 述 代码 中 ， 前 面 所 有 的 Promise 对 和 象 的 状态 都 变 成 表示 成 功 的 fulfilled 之 后 才 会 执行 
delay (Math.min.apply (Math, results)) 这 个 Promise 对 象 , 还 要 注意 , 传 给 then (results) 
的 参数 是 一 个 数组 , 其 中 的 元 素 是 前 面 每 个 Promise 对 象 的 结果 。 从 调用 .then 方 法 这 一 点 你 可 能 
已 推断 出 ，Promise.all(array) 返 回 的 是 一 个 Promise 对 象 ， 而 且 当 arravy 中 所 有 Promise 对 象 
的 状态 都 为 fulfilledq 时 ， 返 回 的 Promise 对 象 的 状态 才 是 fulfillea。 

在 执行 长 时 间 运 行 的 操作 ， 例 如 一 系列 AJAX 请 求 时 ，Promise .al1 特 别 有 用 ， 因 为 如 果 能 
同时 执行 这 些 操作 的 话 , 就 无 需 串 行 执行 了 。 如 果 已 经 知道 所 有 要 请 求 的 端点 , 就 无 需 串 行 请 求 ， 
执行 并 行 请 求 即 可 。 等 到 所 有 请 求 结束 后 ， 我 们 就 可 以 处 理 这 些 请 求 得 到 的 结果 了 。 

使 用 Promise 对 象 进 行 函数 式 编程 

若 想 使 用 Promise 对 象 执行 async.map 或 async.filter 这 样 的 函数 式 操 作 ， 你 最 好 使 用 
Array 原 型 中 的 本 地 方法 。 我 们 无 需 在 Promise 对 象 中 实现 所 需 的 操作 ,因为 使 用 .then 方 法 就 可 
以 把 结果 转换 成 所 需 的 格式 。 下 列 代码 清单 使 用 前 面 定 义 的 aelay 函 数 ， 把 超过 400 毫 秒 的 结 
提取 出 来 ， 并 对 其 排序 。 


这 些 Promise 对 象 的 结果 以 数组 的 
形式 传 给 Promise.al1 回 调 。 
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代码 清单 6.22 ”使 用 delay 函 数 排序 结 


Promise 
.all([delay (700), delay (300), delay (500)]) 
2 .then (function filterTransform (results) { 然后 使 用 一 个 转 
等 待 所 有 实现 暂停 的 return results.filter(function greaterThan (result) 换 回调 过 滤 结 果 
Promise 对 象 都 确定 return result > 400; 
让 


} 

.then(function sortTransform (results) -i 
return results.sort (function es (a, 想 转换 多 少 次 都 

return a - b; 

让 

} 

.then(function print (results) { PR A 
console.log (results); Ze 链 中 的 每 hs 
0 得 到 转换 后 的 结果 


})3 


可 以 看 出 ， 使 用 Promise 对 象 同时 处 理 同步 和 异步 操作 就 这 么 简单 ， 即 便 涉及 函数 式 操作 或 
AJAX 请 求 ， 也 难 不 到 哪里 去 。 现 在 我 们 处 理 的 都 是 操作 成 功 的 情况 ,但 在 使 用 Promise 对 象 时 应 
该 怎么 恰当 处 理 错误 呢 ? 


6.3.4 处理 被 拒绝 的 Promise 对 象 


我 们 在 6.3.1 节 说 过 ， 可 以 向 then (success，failure) Rl 处 理 被 拒绝 
的 Promise 对 象 。" 类 似 地 ， 使 用 .catch (failure) 能 更 清楚 地 表明 意图 。 这 个 方法 是 .then 
(undefined，failure) 的 别名 。 

到 目前 为 止 ， 我们 都 是 调用 传人 Promise 构 造 方法 的 reject 回 调 显 式 来 拒绝 Promise 对 象 的 ， 
不 过 这 不 是 唯一 的 方式 。 

以 下 就 是 一 个 抛 出 并 处 理 错误 的 示例 。 注意 , 我 在 Promise 对 象 中 使 用 的 是 throw 语句 ,不 过 
你 应 该 使 用 更 具 语义 的 reject 人 参数 。 我 这 样 做 是 为 了 说 明 在 Promise 对 象 和 then 方 法 中 都 能 抛 出 
异常 。 
代码 清单 6.23 ”捕获 抛 出 的 错误 

function delay (t) { 

function wait (fulfill, reject) { 
Ee 了 3 计 


throw new Error('Delay must be greater than zero.'); 


} 
















































































setTimeout (function later () { 
console.log('Resolving after', t); 
falfill (ty) 

3 


} 
return new Promise (wait); 


} 





Qa 被 拒绝 的 Promise 对 象 ， 就 是 状态 为 Tejected 的 Promise 对 象 。 一 一 译 者 注 
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Promise 
.all([delay (0), delay (400)]) 
.then(function resolved (result) { 
throw new Error('I dislike the result!'); 
} 
.catch(function errored (err) { 
console.logl(err.message); 


和 学 

如 果 你 运行 这 个 示例 , 会 发 现 aelay (0) 这 个 Promise 对 象 抛 出 的 错误 导致 了 成 功 分 支 没 有 执 
行 ， 因 此 没有 显示 'I dislike the result!' 消 息 。 即 便 没有 delay (0) ，then 方 法 中 的 成 功 
分 支 也 会 抛 出 错误 ， 阻 止 执行 后 续 的 成 功 分 支 。 

至 此 , 我 们 说 明了 什么 是 回调 之 坑 以 及 如 何 避 免 掉 入 其 中 ,介绍 了 如 何 使 用 async 库 控制 异 
步 流程 ， 还 说 明了 如 何 使 用 Promise 对 象 控制 流程 。Promise 对 象 包含 在 即将 发 布 的 ES6 中 ， 不 过 
背 助 一 些 库 和 腻子 脚本 已 经 得 到 广泛 使 用 了 。 

接 下 来 我 们 要 讨论 事件 。 这 是 JavaScript 处 理 异 步 操作 的 一 种 方式 。 如 果 你 做 过 JavaScript 开 
发 ， 我 相信 你 一 定 遇 到 过 这 种 处 理 方式 。 介 绍 完事 件 之 后 ， 我 们 会 介绍 ES6 提 供 的 另 一 种 异步 流 
程 处 理 方式 一 一 生成 器 。 这 是 个 新 功能 ,其 作用 相当 于 惰性 处 理 迭 代 器 ,类 似 于 C# 等 语言 对 可 枚 
举 对 象 的 处 理 方式 。 


6.4 理解 事件 


事件 也 叫 发 布 一 订阅 模式 或 事件 发 射 器 模式 。 在 事件 发 射 器 模式 中 ,组 件 发 出 某 些 类 型 的 事 
件 , 并 随 带 一 些 参 数 。 有意 处 理 这 些 事件 的 组 件 可 以 订阅 关注 的 事件 ,然后 处 理事 件 和 随 带 的 参 
数 。 事 件 发 射 需 模式 的 实现 方式 有 多 种 ,而 且 大 多 数 都 涉及 某 种 原型 继承 方式 。 不 过 也 可 以 把 必 
要 的 方法 依附 到 现 有 的 对 象 上 ， 我 们 会 在 6.4.2 节 介绍 这 种 方式 。 

浏览 右 原 生 支 持 事 件 ， 实 现 的 原生 事件 包括 AJAX 请 求 获取 响应 、 人 类 和 DOM 交 互 、 
WebSocket 仔 细 监 听 即 将 到 达 的 操作 等 。 事 件 天 生 就 是 异步 的 ， 而 且 遍 布 于 浏览 器 中 ， 所 以 我 们 
要 恰当 地 处 理 。 




























































































6.4.1 事件 和 DOM 


事件 是 Web 中 最 古老 的 异步 模式 之 一 ， 在 JavaScript 代 码 中 处 理 浏览 器 中 的 DOM 时 就 要 用 到 
有 件 。 下 列 示例 注册 了 一 个 事件 监听 器 ， 每 次 点 击 页 面 都 会 触发 绑 定 的 事件 : 
document .body.addEventListener('click', function handler () { 


console.log('Click responsibly. Do not click and drive!'); 


3 

DOM 事 件 通常 都 由 人 的 行为 触发 ， 例 如 在 浏览 器 窗口 中 点 击 、 平 移 、 触 摸 或 缩放 。 如 果 抽 
象 做 得 不 够 好 ，DOM 事 件 很 难 测试 。 在 下 面 这 个 简单 的 示例 中 ， 我 们 可 以 看 到 使 用 匿名 函数 处 
理 点 击 事件 会 对 测试 产生 什么 影响 : 











hl 
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document .bodqy .addEventListener('click', function handler () { 
console.log(this.innerHTML); 
Ps 


这 个 功能 很 难 测 试 ， 因 为 脱离 事件 无 法 访问 事件 句柄 。 为 了 更 易于 测试 , 也 为 了 避免 测试 句 
柄 时 模拟 点 击 操作 的 麻烦 〈 在 集成 测试 中 还 是 要 模拟 , 详 见 第 8 章 )， 建议 把 句柄 提取 出 来 , 定义 
成 具名 函数 , 或 者 把 主要 人 逻辑 移 到 易于 测试 的 具名 函数 中 。 这 么 做 还 有 利于 代码 重用 ， 因 为 能 使 
用 相同 的 方式 处 理 多 个 事件 。 下 列 代码 片段 展示 了 如 何 把 处 理 点 击 操作 的 句柄 提取 出 来 : 


function elementClick handler () { 
console.log(this.innerHTML); 

} 

var element 

var handler 

















document .body; 
elementClick.bind(element); 


document .body .addEventListener('click', handler); 


得 益 于 Function.prototype.bind, 我 们 才能 把 那个 元 素 添 加 到 上 下 文中 。 人 们 对 绑 定 上 
下 文 的 方式 有 争论 ， 有 些 建议 使 用 chis， 有 些 则 反对 。 你 应 该 选择 一 种 自己 觉得 最 舒服 的 方式 ， 
并 且 坚 持 使 用 下 去 。 我 们 既 不 能 始终 把 句柄 绑 定 到 相关 的 元 素 上 ， 也 不 能 一 直 使 用 nul1 上 下 文 
绑 定 句柄 。 一 致 性 是 代码 可 读 性 ( 和 可 维护 性 ) 最 重要 的 影响 因素 之 一 。 

接 下 来 我 们 要 自己 动手 实现 事件 发 射 器 。 我 们 会 把 相关 的 方法 依附 到 对 象 上 , 而 不 使 用 原型 ， 
这 样 实现 起 来 更 简单 。 下 面 来 看 具体 应 该 怎么 做 。 


6.4.2 ”自己 实现 事件 发 射 器 


事件 发 射 器 通常 支持 多 种 事件 类 型 ， 而 不 是 只 支持 一 种 。 下 面 我 们 一 步 步 实现 一 个 用 于 创建 
事件 发 射 器 的 函数 , 这 个 函数 还 能 把 现 有 的 对 象 改 造成 事件 发 射 器 。 第 一 步 我 们 要 返回 一 个 原封 
不 动 的 对 象 ， 如 果 没 有 提供 对 象 则 创建 一 个 : 
function emitter (thing) { 
i i ale 
thing = {}; 
} 


return thing; 


} 

为 了 提供 强大 的 功能 , 我 们 需要 让 这 个 函数 支持 多 种 事件 类 型 。 这 样 做 并 不 太 费 事 , 我 们 只 
需 在 一 个 对 象 中 把 事件 类 型 和 事件 监听 器 对 应 起 来 。 同 理 , 每 种 事件 类 型 对 应 的 值 需要 是 一 个 数 
组 ， 才 能 在 每 种 事件 类 型 上 绑 定 多 个 事件 监听 器 。 下 列 代码 清单 〈 在 本 书 配套 源码 的 ch06/11_ 
event-emitter 文 件 夹 中 ) 展示 了 如 何 把 现 有 的 对 象 转换 成 事件 发 射 器 。 


代码 清单 6.24 ”把 对 象 改造 成 事件 发 射 器 


function emitter (thing) { 
var events = {}; 




































































Ne thing 参 数 是 我 们 想 改 
造成 事件 发 射 器 的 对 象 
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To 征 
thing = {}; 


) 如 果 没 有 提供 对 象 ， 
就 创建 一 个 
thing.on = function on (type, listener) { 把 事件 监听 器 依附 到 现 有 
Mon EDol 的 或 新 建 的 事件 类 型 上 
events[type] = [listener]; 
} else { 


events[type] .push (listener); 
} 
3 


return thing; 


} 


现在 , 创建 发 射 器 后 就 可 以 添加 事件 监听 器 了 ， 操作 方式 如 下 。 记 住 ， 触发 事件 时 可 以 把 任 
意 数量 的 参数 传 给 监听 器 ; 接 下 来 就 可 以 实现 触发 事件 的 方法 了 。 


var thing = emitter(); 




















thing.on('change', function changed () { 

console.log('thing changed!'); 
} 
显然 , 这 和 DOM 事 件 监 听 器 的 使 用 方式 一 样 。 接 下 来 我 们 要 做 的 就 是 实现 触发 事件 的 方法 。 
没有 这 个 方法 ,我们 实现 的 就 称 不 上 是 事件 发 射 器 。 我 们 要 实现 一 个 emit 方 法 ， 触 发 特定 事件 
类 型 的 监听 器 ， 并 且 传人 任意 数量 的 参数 ， 如 下 列 代码 清单 所 示 。 


代码 清单 6.25 ”触发 事件 监听 器 
thing.emit = function emit (type) { 
var evt = events[typel]; 
Tf davty). 撑 
return; 
3} 
Var args = Array.prototype.slice.call (arguments, 1); 
for (var i = 0; i < evt.length; i++) { 
evt[i].apply (thing, args); 
} 
人 
在 上 面 的 代码 中 , 我 们 要 关注 的 是 Array.prototype.slice.call(arguments ， 1 合体 。 
我 们 把 arguments 对 象 传 给 Array .prototype.slice 方 法 ,并且 指定 从 索引 1 开始 截取 。 这 个 
语句 有 两 个 作用 : 首先 ， 它 把 传人 emit 方 法 的 arguments 对 象 校正 成 真正 的 数组 ， 然 后 删除 第 
一 个 元 素 ， 即 事件 类 型 ， 因 为 调用 事件 监听 器 时 不 需要 这 个 信息 。 
异步 执行 监听 器 
最 后 我 们 还 要 作 一 项 调整 , 即 让 监听 器 异步 执行 ,防止 某 个 监听 需 出 问题 后 中 断 执行 主 循环 。 
这 里 可 以 使 用 try/catch 块 ， 但 如 果 不 想 在 事件 监听 器 中 处 理 异 常 的 话 ， 可 以 把 异常 交 给 使 用 者 处 
理 。 为 了 实现 异步 ， 我 们 可 以 使 用 setTimeout 隐 数 ， 如 下 列 代码 清单 所 示 。 
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代码 清单 6.26 ”触发 事件 


thing.emit = function emit (type) { 
Var evt = eventsl[ltypel]; 
if (!evt) { 
return; 
} 
Var args = Array.prototype.slice.call (arguments, 1); 
for (var i = 0; i < evt.length; i++) { 
debounce (evt [i]); 
} 
function debounce (e) { 
setTimeout (function tick () { 
e.apply (thing, args); 
j 0 
} 
}; 


现在 我 们 可 以 创建 发 射 器 对 象 , 或 把 现 有 的 对 象 转换 成 事件 发 射 器 了。 注意 ,因为 我 们 把 事 
件 监 听 器 放 在 了 一 个 超时 处 理 函 数 中 , 所 以 ， 如 果 回 调 抛 出 错误 ， 其 他 代码 会 继续 执行 ,直至 结 
束 。 这 和 事件 发 射 占 的 同步 实现 方式 有 所 不 同 ， 因 为 在 同步 方式 中 ,出 现 错误 后 会 停止 执行 当前 
代码 路 径 中 的 代码 。 

为 了 做 个 有 趣 的 实验 ,我 使 用 Function.prototype.pbind 把 一 组 事件 绑 定 到 了 一 个 事件 发 
射 器 上 ， 如 下 列 代码 清单 所 示 。 我 们 来 看 以 下 代码 是 如 何 运作 ， 以 及 为 什么 如 此 运作 的 。 


代码 清单 6.27 ”使 用 事件 发 射 器 


Var beats = emitter(); 
Var handleCalm = beats.emit.bind(beats, 'ripple', 10); 











beats.on('ripple', function rippling (i) { 
Var cb = beats.emit.bind(beats, 'ripple', --i); 
Var timeout = Math.random() * 150 + 50; 
Ga 
setTimeout (ch, timeout); 
} else { 
beats.emit ('calm'); 
} 
})y 





beats.on('calm', setTimeout.bind(null, handleCalm, 1000)); 


beats.on('calm', console.log.bind(console, 'Calm...')); 
beats.on('ripple', console.log.bind(console, 'Rippley!')); 


beats.emit ('ripple', 15); 

显然 ， 这 个 示例 没什么 太 大 的 作用 。 不 过 有 趣 的 是 ,其 中 两 个 监听 器 用 于 控制 流程 ， 另 两 个 
用 于 控制 输出 ,而 且 触 发 一 次 就 能 让 事件 链 一 直 执 行 下 去 。 和 之 前 一 样 ， 本 书 的 配套 源码 中 有 一 
份 完整 可 用 的 副本 ,在 ch06/11_event-emitter 文 件 夹 中 。 打 开 附带 的 示例 后 ,记得 看 一 下 前 面 儿 个 
示例 的 代码 。 
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事件 发 射 器 的 强大 体现 在 它 的 灵活 性 上 , 我 们 还 可 以 反 过 来 使 用 发 射 器 。 假 设 使 用 事件 发 射 
器 控制 组 件 时 , 我 们 向 外 提供 的 是 触发 功能 而 不 是 监听 功能 , 那么 我 们 就 可 以 向 这 个 组 件 传送 任 
何 消息 ， 让 这 个 组 件 处 理 ; 而 且 与 此 同时 ， 这 个 组 件 还 可 以 触发 自身 的 事件 ， 让 其 他 组 件 处 理 。 
这 个 过 程 实际 上 就 是 在 组 件 之 间 通 信 。 

本 章 还 剩 最 后 一 个 话题 要 讨论 : ES6 中 的 生成 器 。 生 成 右 是 ES6 中 的 一 种 特殊 的 函数 ， 可 以 
惰性 近代 ， 实 现 有 趣 的 功能 。 下 面 详细 说 明生 成 能 。 


6.5 展望 : ES6 生成 器 


JavaScript 生 成 需 是 ES6 中 一 个 有 趣 的 新 功能 ， 在 很 大 程度 上 是 受 Python 启发 的 。 生 成 器 表示 
值 序列 , 例如 斐 波 那 契 数 列 , 而 且 这 个 序列 是 可 以 欠 代 的 。 虽 然 JavaScript 已 经 提供 了 迭代 数组 的 
功能 , 但 生成 器 使 用 的 是 惰性 迭代 方式 。 惰性 迭代 更 好 ,因为 迭代 无 穷 序 列 生 成 右 时 不 会 出 现 无 限 
循环 或 堆栈 溢出 异常 。 生 成 器 函数 使 用 星 号 注 明 ， 而 旦 必须 使 用 yield 关 键 字 返回 序列 中 的 元 素 。 


6.5.1 创建 第 一 个 生成 器 

下 列 代码 清单 展示 了 如 何 创建 一 个 表示 斐 波 那 契 无 穷 数 列 的 生成 器 函数 。 按 照 定义 ,， 斐 波 那 
契 数 列 的 前 两 个 数 都 是 1， 随 后 的 数 分 别 是 前 两 个 数 之 和 。 
代码 清单 6.28 生成 斐 波 那 揣 数列 


function* fibonacci () { 
Var GLlder se O03 
Var Old = 1 















































































































































yield 1; 


while (true) { 
yield old + older; 
Var next = older + old; 
older = old; 
old = next; 
} 


创建 生成 器 之 后 ,我 们 可 能 想 使 用 生成 的 值 ， 为 此 , 我 们 需要 调用 生成 器 函数 ， 得 到 一 个 迭 
代 器 。 然 后 调用 iterator .next () 方 法 ， 使 用 迭代 器 从 生成 器 中 获取 值 ， 而 且 调用 一 次 只 获取 
一 个 值 。 调用 iterator .next () 方 法 得 到 的 结果 是 一 个 对 象 。 对 上 例 代 码 清单 中 的 生成 吉 来 说 ， 
得 到 的 结果 可 能 是 { value: 1，done: false }。 其 中 ，dqone 属 性 的 值 会 在 迭代 完毕 后 变 成 
true。 不 过 在 这 个 示例 中 ,迭代 永远 不 会 结束 ， 因 为 我 们 使 用 了 无 限 循环 while (true) 。 下 列 
示例 演示 了 如 何 和 迭代 这 个 斐 波 那 契 无 穷 数 列 生 成 器 中 的 部 分 值 : 

var iterator = fibonacci(); 


Var 1 三 10; 
var item; 
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while (i--) { 
item = iterator.next (); 
console.log(item.value); 


4 
运行 本 节 示 例 最 简单 的 方式 是 使 用 ES6 Fiddle ( http://es6fiddle.net )， 这 个 工具 的 作用 是 运行 
你 输入 的 ES6 代 码 ， 包 括 使 用 生成 器 的 代码 。 此 外 ， 还 可 以 访问 https:/nodejs.org/dist， 下 载 并 安 
装 Node v0.11.10 或 之 后 的 版 本 。 使 用 node --harmony <file> 命 令 执行 脚本 便 会 启用 ES6 中 的 
功能 ， 例 如 生成 器 及 相应 的 functionx () 结构 、yield 关 键 字 和 for. .of 结构 。 下 面 介 绍 
for. .of 结构 。 
1. 使 用 for . .of 迭代 
使 用 for . .of 句法 能 简化 欠 代 生成 器 的 过 程 。 通 常情 况 下 ， 我 们 要 调用 iterator .next () 
方法 ， 然 后 存储 或 使 用 result .value 属 性 的 值 ， 而 且 还 要 检查 iterator .done 属 性 的 值 ， 判 
断 迭 代 是 否 结束 。 而 for. .of 句法 会 代 你 执行 这 些 操 作 ， 简 化 代码 。 下 列 代码 展示 了 如 何 使 用 
for . .of 循环 迭代 生成 器 ,注意 ,我们 使 用 的 是 一 个 有 限 生 成 右 , 如 果 使 用 前 面 定 义 的 fibonacci 
生成 器 ， 得 到 的 将 是 无 限 循环 ， 要 使 用 break 才 能 退出 循环 。 
function* keywords () { 
Yield 'builgdfirst'; 
yield 'javascript'; 
yield 'design'; 
yield 'architecture'; 



















































































} 


for (keyword of keywords()) { 
console.1log (keyword); 





} 
现在 你 可 能 会 问 , 处 理 异 步 流程 时 生成 器 有 什么 用 呢 ? 很 快 我 们 就 会 回答 这 个 问题 。 在 此 之 6 
前 ， 我 们 移 说 明 在 生成 器 函数 中 暂停 执行 的 含义 。 

2. 在 生成 器 中 暂停 执行 

我 们 还 以 第 一 个 生成 器 为 例 : 

function* fibonacci () { 


Var older = 1; 
var old S03 











while (true) { 
yield old + older; 
older = old; 
old += older; 
} 
} 


这 个 生成 器 是 怎么 运行 的 呢 ?” 它 是 如 何 中 断 无 限 循环 的 呢 ? 每 次 执行 yie1l6 请 句 时 , 生成 器 
中 的 代码 就 会 暂停 执行 ,把 控制 权 交 给 使 用 方 ， 而 且 还 会 把 yie1d 语 句 得 到 的 值 传 给 使 用 方 。 这 
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就 是 iterator.next () 方 法 获取 值 的 方式 。 下 面 我 们 使 用 一 个 简单 的 生成 器 〈 有 副作用 ) 进 一 
步 分 析 这 种 行为 : 
function* sentences () { 
yield 'going places'; 
console.log('this can wait'); 


yield 'yay! done'; 
} 


在 迭代 生成 器 生成 的 序列 时 , 每 次 调用 yiela 后 会 立即 暂停 执行 生成 器 中 的 代码 (暂停 执行 ， 
直到 请 求 序列 中 的 下 一 个 值 为 止 ), 这 人 允许 你 在 下 次 调用 iterator.next () 方 法 时 可 以 执行 一 些 
有 副作用 的 代码 ， 例 如 上 例 中 的 console.1og 语 句 。 下 列 代码 片段 展示 了 如 何 迭 代 这 个 生成 器 : 


Var iterator = sentences(); 








iterator.next (); 
// <- 'going places' 


iterator.next () ; 
// 输出 : 'this can wait' 
// <- 'yay! done' 


掌握 这 些 关于 生成 器 的 新 知识 后 , 我 们 可 以 尝试 创建 操作 生成 器 的 迭代 器 ,让 异步 代码 更 容 
易 编写 。 


6.5.2 ”生成 器 的 异步 性 


下 面 我 们 充分 利用 生成 右 暂 停 执行 这 个 行为 , 创建 一 个 迭代 器 , 把 同步 流程 和 异步 流程 紧密 
结合 在 一 起 。 你 可 以 思考 一 下 ,为 了 实现 下 列 代 码 (在 ch06/13_generator-flow 文 件 夹 中 ) 的 功能 ， 
应 该 怎么 定义 flow 函数 。 在 这 个 代码 清单 中 , 我 们 使 用 yie1ld 调 用 需要 异步 执行 的 方法 ,等 到 获 
取 所 需 的 全 部 食物 类 型 之 后 ， 再 调用 flow 函 数 提 供 的 next 回 调 。 注 意 ， 我 们 仍然 使 用 了 定义 回 
调 的 习惯 ， 即 第 一 个 参数 是 错误 对 象 或 假 值 。 


代码 清单 6.29 ”创建 利用 暂停 执行 行为 的 迭代 器 
flow(function* iterator (next) { 
console.log('fetching food types...'); 
var types = yield get; 
console.log('waiting aroungd...'); 
yield setTimeout (next, 2000); 
console.log(types.join(', ')); 


}); 



























































function get (next) { 
setTimeout (function later () { 
next (null, ['bacon', 'lettuce', 'crispy bacon']); 
} ,L000 


} 
为 了 让 以 上 代码 清单 能 使 用 , 我 们 要 创建 f1ow 方 法 , 在 调用 next 回 调 之 前 , 暂停 执行 yielg 
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语句 。 这 个 flow 困 数 的 参数 是 一 个 生成 器 ， 如 上 述 代码 清单 所 示 ， 然 后 迭代 这 个 生成 器 。 这 个 
生成 器 应 该 接受 一 个 next 回 调 ， 因 此 可 以 避免 使 用 匿名 函数 。 除 此 之 外 ， 还 可 以 定义 一 个 参数 
为 next 回 调 的 函数 , 然后 迭代 器 把 next 回 调 传 给 这 个 函数 。 使 用 方 要 通知 迭代 器 该 调用 next () 
方法 让 和 暂停 中 新 ， 从 上 次 暂停 的 地 方 继续 执行 了 。 

下 列 代 码 清 单 是 f1ow 函 数 的 一 种 实现 方式 ， 和 目前 你 所 见 到 的 迭代 器 差不多 。 不 过 这 个 孙 
数 还 能 让 参数 表示 的 生成 器 函数 迭代 序列 。 使 用 生成 器 实现 异步 模式 的 关键 是 , 让 生成 器 不 断 暂 
停 (使 用 yiela ) 和 继续 (调用 next ) 迭代 流程 。 
代码 清单 6.30 ”使 用 生成 器 控制 流程 


function flow (generator) { 
Var iterator = generator (next); 














next (); Be 
手动 调用 next () 回 
~ 调 ， 开 始 处 理 流程 


function next (err, result) { 
TE (EEEY 汪 

iterator.throw (err); 

} 


var item = iterator.next (result); 





if (item.done) { 
return; 
} 
if (typeof item.value === 'function') { 


item.value (next); 
} 
} 
} 


使 用 这 个 flow 函 数 可 以 轻易 混用 同步 流程 和 异步 流程 ， 也 能 在 这 两 种 流程 之 间 切 换 自 如 。 
此 后 我 们 可 以 使 用 普通 的 JavaScript 回 调和 contra 库 (async 库 的 轻 量 级 替代 品 ) 控制 流程 了 。 




















6.6 总 结 


本 章 讲 了 很 多 知识 ， 总 结 起 来 有 以 下 几 点 。 

口 说 明了 什么 是 回调 之 坑 ， 讲 解 了 避免 掉 入 坑 中 的 方法 : 为 函数 命名 ， 或 者 自己 实现 控制 

流程 的 方法 。 

口 学 习 了 如 何 使 用 async 库 实现 不 同 的 需求 ,例如 异步 串 行 、 异 步 映射 和 异步 队列 。 我 们 还 
介绍 了 Promise 对 象 , 学 习 了 如 何 创建 Promise 对 象 ， 如 何 链 接 多 个 Promise 对 象 ， 以 及 如 何 
混合 搭配 异步 流程 和 同步 流程 。 

口 使 用 一 种 与 实现 无 关 的 方式 介绍 了 事件 ， 学 习 了 如 何 自己 实现 事件 发 射 器 。 

口 简单 介绍 了 即将 发 布 的 ES6 中 的 生成 器 ， 以 及 如 何 使 用 生成 器 控制 异步 流程 。 

第 7 章 将 深入 讲解 客户 端 编程 实践 。 我 们 会 讨论 目前 与 DOM 交 互 的 方式 以 及 如 何 对 其 进行 改 

进 ， 还 会 讨论 组 件 化 开发 对 未 来 的 影响 。 我 们 会 详细 说 明 使 用 jQuery 的 方式 ， 指 出 这 个 库 无 法 满足 

所 有 需求 ， 然 后 提供 几 个 可 供 选择 的 替代 方案 。 我 们 还 会 着 手 学 习 一 个 MVC 框 架 一 BackboneJS。 
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本 章 内 容 

口 比较 纯 jQuery 和 MVC 模 式 

口 学 习 在 JavaScript 中 使 用 MVC 模 式 
口 介绍 Backbone 

口 使 用 Backbone 开 发 应 用 

口 在 服务 器 和 浏览 器 中 共享 视图 泻 染 








至 此 ， 我 们 已 讨论 了 应 用 开发 周边 的 话题 ， 例 如 制定 构建 过 程 ， 还 说 到 了 代码 相关 的 话题 ， 
例如 清晰 的 异步 流程 和 模块 化 应 用 设计 , 不 过 还 没 怎么 涉及 和 应 用 本 身 有 关 的 话题 。 本 章 就 来 探 
讨 一 下 这 个 话题 , 说 明 为 什么 jQuery ( 一 个 流行 的 库 , 用 来 简化 和 DOM 的 交互 ) 可 能 无 法 满足 大 
型 应 用 的 设计 需求 ， 然 后 介绍 一 些 增强 或 完全 替代 jQuery 的 工具 。 我 们 会 使 用 模型 -视图 -控制 器 
( Model-View-Controller， 简 称 MVC ) 设计 模式 开发 一 个 应 用 ， 管 理 待 办 事项 清单 。 

和 模块 化 类 似 , MVC 也 通过 分 离 关 注 点 来 提升 软件 的 质量 。MVC 把 关注 点 分 解 成 三 种 模块 : 
模型 、 视 图 和 控制 器 。 这 三 部 分 互相 联系 ， 把 信息 的 内 部 表示 ( 即 模 型 ,使 用 开发 者 理解 的 方式 
表示 数据 )、 表 现 层 ( 即 视图 ， 用 来 把 数据 展现 给 用 户 ) 和 逻辑 〈 即 控制 锋 ， 用 来 连接 这 两 种 表 
示 相 同 数 据 的 不 同方 式 ， 还 会 验证 用 户 输 入 的 数据 ， 决 定 把 哪个 视图 展现 给 用 户 ) 分 开 。 

首先 ， 我 会 告诉 你 为 什么 jQuery 不 能 满足 大 型 应 用 的 设计 需求 ， 然 后 会 通过 Backbone.js 库 教 
你 如 何在 JavaScript 中 使 用 MVC。 我 的 目标 不 是 让 你 变 成 Backbone 大 师 ， 而 是 带 你 走 进 现代 
JavaScript 应 用 结构 设计 的 奇妙 世界 。 


7.1 jQuery 力 不 胜任 


jQuery 库 自 出 现 以 来 帮助 了 几乎 每 一 个 Web 开 发 者 ， 它 在 某 些 方面 做 得 很 好 ， 能 解决 不 同 版 
本 浏览 器 的 已 知 缺陷 ， 统 一 不 同 浏览 器 的 Web API， 还 为 使 用 者 提供 了 灵活 的 API， 让 得 到 的 结 
果 保 持 一 致 ， 易 于 使 用 。 
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jQuery 帮助 普及 了 CSS 选 择 器 ， 让 它 成 为 在 JavaScript 中 查询 DOM 的 首选 方法 。DOM API 中 
原生 的 cuerySselector 方 法 和 jQuery 的 查询 方式 类 似 ， 都 使 用 CSS 选 择 回 搜索 DOM 元 素 。 不 过 ， 
仅仅 使 用 jQuery 还 不 够 ， 原 因 详 述 如 下 。 

1. 代码 的 组 织 方 式 和 jQuery 

jQuery 没有 提供 任何 组 织 代 码 基 的 方式 ， 这 无 妨 ， 因 为 jQuery 的 作用 不 在 此 。 虽 然 jQuery 简 
化 了 访问 原生 DOM API 的 方式 ， 但 没有 在 如 何 让 应 用 的 结构 变 得 更 好 上 下 任何 功夫 。 在 传统 的 
Web 应 用 中 可 以 只 使 用 jQuery， 但 开发 单 页 应 用 时 这 样 做 却 不 合适 ， 因 为 单 页 应 用 的 客户 端 代码 
基 更 大 ， 也 更 复杂 。 

现在 jQuery 仍然 很 流行 的 另 一 个 原因 是 ， 它 能 很 好 地 兼容 其 他 库 。 因 此 ， 我 们 没 必要 使 用 
jQuery 做 所 有 事情 ， 相 反 ， 可 以 使 用 其 他 增强 jQuery 功能 的 库 ， 或 者 不 是 为 了 增强 jQuery 功能 的 
库 。 当 然 也 可 以 只 使 用 jQuery。 如 果 不 把 jQuery 和 MVC 库 或 框架 结合 在 一 起 使 用 ,很 难 开发 出 模 
块 化 组 件 ， 而 且 随 着 时 间 的 推移 ， 代 码 会 变 得 难以 维护 。 

MVC 模 式 把 应 用 的 关注 点 分 成 视图 、 模 型 和 控制 器 三 部 分 ， 而 且 各 部 分 之 间 相 互 作用 、 相 
互 合作 ， 组 成 一 个 完整 的 应 用 。 使 用 MVC， 大 部 分 逻辑 都 自 成 一 体 ， 也 就 是 说 ， 复 杂 的 视图 不 
会 把 应 用 变 复杂 ， 因 此 MVC 特 别 适合 开发 可 伸缩 的 应 用 。MVC 模 式 在 20 世 纪 70 年 代 后 期 就 出 现 
了 ， 但 直到 2005 年 ，Ruby on Rails 才 将 其 引入 Web 应 用 领域 。2010 年 ，Backbone 发 布 了 ， 把 MVC 
带 到 了 主流 的 JavaScript 客 户 端 应 用 开发 领域 。 如 今 ， 除 了 Backbone 之 外 还 有 很 多 其 他 使 用 MVC 
模式 开发 Web 应 用 的 JavaScript 库 。 

2. 视图 模板 

首先 我 们 要 编写 HTML ， 这 叫 视 图 。 视 图 用 于 定义 组 件 的 外 观 ， 说 明 如 何在 用 户 界 面 中 显示 
组 件 , 以 及 在 什么 地 方 显 示 数 据 。 如 果 只 使 用 jQuery 的 话 , 要 自己 动手 创建 组 成 组 件 的 DOM 元 素 ， 
还 要 设 定 相 应 的 HTML 属 性 值 和 内 部 的 文本 。 不 过 ,一 般 我 们 都 会 使 用 模板 引擎 ， 把 模板 字符 串 
(在 这 里 是 HTML ) 和 数据 提供 给 引擎 ， 让 引擎 使 用 数据 填写 模板 。 在 模板 中 可 能 需要 遍历 数组 ， 
然后 为 每 个 元 素 创 建 一 些 HTML 元 素 。 这 种 代码 使 用 纯粹 的 JavaScript 写 起 来 很 繁琐 ， 就 算 使 用 
jQuery 也 很 麻烦 。 但 是 ， 使 用 模板 库 的 话 ， 就 无 需 担 心 了 ， 因 为 模板 引擎 能 帮 有 我 们 处 理 。 图 7-1 
说 明了 如 何 把 模板 当成 可 重用 的 组 件 使 用 。 

3. 使 用 控制 器 

然后 我 们 要 实现 功能 , 让 视图 有 数据 可 以 显示 一 一 这 一 部 分 叫 控 制 器 。 控制 占 的 作用 是 让 沉 
牢 的 HTML 模 板 活 跃 起 来 。 在 控制 器 中 我 们 可 以 把 DOM 事 件 绑 定 到 特定 的 操作 上 , 还 可 以 在 某 件 
事 发 生 时 更 新 视图 。 使 用 jQuery 能 轻松 实现 这 些 操作 , 我 们 只 需 把 事件 添加 到 DOM 中 就 行 了 。 看 
似 是 这 样 ， 然 而 ， 这 只 适用 于 一 次 性 绑 定 。 如 果 我 们 想 开发 一 个 组 件 ， 使 用 类 似 前 面 所 示 的 那 种 
视图 ， 把 事件 绑 定 到 泻 染 得 到 的 HTML 上 ， 此 时 应 该 怎么 做 呢 ? 

对 这 种 需求 来 说 ， 我 们 需要 找到 一 种 统一 的 方式 ， 来 创建 DOM 结 构 、 绑 定 事 件 、 对 变动 作 
出 反应 并 更 新 DOM。 而 且 这 个 过 程 需要 单独 完成 ， 因 为 视图 是 可 重用 的 组 件 ， 要 在 应 用 中 的 多 
个 地 方 使 用 。 说 到 底 ， 我 们 就 是 在 自己 开发 MVC 框 架 。 在 学 习 的 过 程 中 ， 这 是 个 不 错 的 练习 。 
其 实 , 我 就 是 这 么 做 才 理 解 了 如 何在 JavaScript 中 使 用 MVC 模 式 的 ,我 在 自己 的 一 个 个 人 项 目 ( 我 
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的 博客 ) 中 编写 了 一 个 MVC5 引 | 擎 ， 这 为 我 学 习 其 他 JavaScript MVC3 引 敬 葛 定 了 基础 。 如 果 不 想 自 
己 开 发 ， 还 可 以 使 用 现 有 的 ( 久 经 考验 的 ) MVC 框 架 。 




















模板 
模板 可 以 重用 ， 我 们 只 需 提 视图 模型 ， 或 叫 模板 同一 个 模板 可 以 使 用 不 同 
供 缺少 的 部 分 。 数据 ， 填 入 模板 中 的 的 视图 模型 。 这 就 是 这 染 
全 站 5 视图 的 方式 。 

















图 7-1 不 同 的 数据 模型 重用 相同 的 模板 


下 面 我 们 简要 说 明 MVC 模 式 的 工作 方式 ， 开 发 复杂 的 应 用 时 MVC 有 何 作 用 ， 以 及 为 什么 要 
使 用 MVC 模 式 。7.2 节 会 说 明 如 何在 JavaScript 中 应 用 MVC 模 式 。 我 们 会 介绍 几 个 使 用 MVC 模 式 
辅助 编写 代码 的 库 ， 然 后 选中 Backbone 作 为 介绍 重点 。 和 预想 的 一 样 ， 使 用 MVC 模 式 时 要 把 应 
用 分 成 以 下 几 个 部 分 。 

口 模型 : 保存 泻 染 视图 所 需 的 信息 。 

口 视图 : 负责 泻 染 模型 中 的 数据 ， 让 用 户 和 模型 交互 。 

口 控制 器 : 在 泻 染 视图 前 查询 模型 ， 还 要 管理 用 户 和 各 组 件 之 间 的 交互 。 
图 7-2 说 明了 使 用 MVC 模 式 的 标准 应 用 中 不 同 组 件 之 间 的 交互 。 

1. 模型 

模型 定义 视图 要 传达 的 信息 。 这些 信 息 可 以 从 服务 中 获取 , 而 这 些 服务 则 会 从 数据 库 中 获取 
数据 。 第 9 章 讨论 REST API 设 计 和 服务 器 层 时 会 谈 到 这 个 问题 。 模 型 中 保存 的 是 原始 数据 ， 没 有 
任何 逻辑 ,纯粹 就 是 一 些 相 关 数 据 。 模 型 也 不 知道 如 何 显示 数 据 ， 这 是 视图 应 该 关注 的 ， 而且 只 
能 由 视图 关注 。 

2. 视图 

视图 由 两 部 分 组 成 : 模板 , 指定 使 用 什么 结构 显示 模型 中 的 数据 ; 模型 , 提供 要 显示 的 数据 。 
模型 可 以 在 不 同 的 视图 中 重用 ， 而 且 通 常 都 会 这 么 做 。 例 如 ，Article 模 型 既 可 以 在 Search 视 图 中 
使 用 ， 也 可 以 在 ArticleList 视 图 中 使 用 。 把 模板 和 模型 结合 在 一 起 ， 得 到 的 是 视图 ， 而 视图 可 以 
用 作 HTTP 请 求 的 响应 。 

3. 控制 器 

控制 器 决定 泻 染 哪 个 视图 ,这 是 控制 器 的 主要 作用 之 一 。 控 制 器 决定 要 泻 染 的 视图 ,并且 
准备 视图 模型 , 为 视图 模板 提供 所 有 相关 的 数据 , 然后 让 视图 引擎 使 用 指定 的 模型 和 模板 泻 染 视 
图 。 我 们 可 以 在 控制 器 中 为 视图 添加 其 他 行为 ， 响 应 特定 的 操作 ,或 者 重 定向 到 其 他 视图 。 
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MVC 模 式 EN 2 
控制 器 可 以 使 用 不 
进一步 分 离 关注 点 同 的 方式 响应 操作 











动作 JSON 响 应 











一 个 控制 器 能 处 理 一 一 = 
多 个 相关 的 操作 动作 














一 个 动作 只 处 理 一 种 类 型 的 事件 。 例 如 : 用 户 
请 求 /api/food-dishes 时 ， 控 制 器 响应 的 可 能 是 


| ee dn et a 





模型 和 视图 pa 
着 一 步 分 认 奖 注 占 员 型 玩 直 有 由 芭 人 蛋 
进一步 分 离 关 注 点 的 数据 


七 时 ， 会 使 用 模型 填充 
视图 模板 中 的 空 




















- 般 来 说 ， 一 个 动作 始终 
演 染 同一 个 视图 ， 不 过 会 
更 用 不 同 的 模型 


























图 7-2”MVC 模 式 把 关注 点 分 离 到 控制 器 、 视 图 和 模型 中 





4. 路 由 

在 Web 中 使 用 MVC 模 式 必 须 有 视图 路 由 ， 不 过 这 个 模式 的 名 称 中 并 没有 体现 出 来 。 在 使 用 
MVC 模 式 开 发 的 应 用 中 ， 视 图 路 由 是 请 求 访问 的 第 一 个 组 件 。 路 由 使 用 预先 定义 好 的 规则 ， 把 
URL 模 式 匹配 到 控制 器 的 动作 上 。 路 由 规则 在 代码 中 定义 ,根据 条 件 捕获 请 求 : 如 果 请 求 
/articles/{slug}， 就 把 这 个 请 求 发 送 给 Articles 控 制 器 ， 然 后 调用 getBySslug 动 作 ， 并 把 
slug 参 数 传 给 这 个 动作 ( slug 的 值 从 请 求 的 URL 中 提取 )。 路 由 把 工作 委托 给 控制 器 完成 , 在 控 
制 右 中 会 验证 请 求 , 判断 是 要 泻 染 视 图 、 重 定向 到 其 他 URL 还 是 执行 其 他 类 似 的 操作 。 路 由 规则 
按 顺 序 执行 ， 如 果 请 求 的 URL 不 匹配 某 个 模式 ， 就 执行 下 一 条 规则 。 

本 章 剩 下 的 内 容 深 入 说 明 如 何在 JavaScript 中 使 用 MVC 模 式 。 


7.2 在 JavaScript 中 使 用 MVC 模式 


MVC 模 式 不 是 什么 新 概念 , 但 它 在 过 去 的 十 年 中 才 得 到 了 广泛 使 用 , 在 客户 端 Web 开 发 领域 
的 普及 尤其 明显 。 以 前 ， 这 一 领域 完全 不 使 用 任何 架构 模式 。 本 节 我 会 讲解 为 什么 选择 Backbone 
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作为 教学 工具 ， 以 及 为 什么 否定 了 其 他 可 选 的 框架 。 在 7.3 方 ， 我 会 通过 Backbone 介 绍 MVC 的 基 
础 知识 。7.4 市 会 分 析 一 个 案例 ， 使 用 Backbone 开 发 一 个 小 型 应 用 ， 以 学 习 如 何 使 用 Backbone 开 
发 可 伸缩 的 应 用 。 第 9 章 会 进一步 挖掘 Backbone 的 功能 ， 利 用 之 前 所 学 的 全 部 知识 ， 开 发 一 个 功 
能 丰富 的 大 型 应 用 。 


























7.2.1 为 什么 使 用 Backbone 


客户 端 有 很 多 不 同 的 MVC 框 架 和 库 ， 服 务 器 端 则 更 多 ， 在 此 不 详细 介绍 。 我 写 这 本 书 时 最 
难 作出 的 决定 之 一 是 , 选择 使 用 哪个 MVC 框 架 。 很 长 一 段 时 间 里 , 我 在 React、Backbone 和 Angular 
之 间 纠 结 。 最 终 我 决定 使 用 Backbone， 因 为 我 觉得 这 是 教 你 相关 概念 的 最 好 的 工具 。 作 出 这 个 选 
择 并 不 容易 ， 因 为 我 要 考虑 框架 的 成 熟 度 ， 是 否 易于 使 用 ,以 及 是 否 为 人 熟知 。Backbone 是 出 现 
最 早 的 MVC 库 之 一 ， 因 此 是 最 成 熟 的 。 而 且 ，Backbone 也 是 最 受 欢 迎 的 MVC 库 之 一 。Angular 是 
由 谷歌 开发 的 MVC 框 架 ， 也 很 成 熟 其 实 比 Backbone 发 布 的 还 早 ， 不 过 Angular 太 复杂 ， 学 习 
起 来 会 比较 困难 。React 由 Facebook 开 发 , 虽然 没有 Angular 那 么 复杂 , 但 这 个 项 目 比 较 年 轻 , 2013 
年 才 发 布 第 一 版 ， 而 且 React 不 是 真正 的 MVC 框 架 ， 它 只 提供 了 MVC 中 的 视图 。 

Angular 中 的 一 些 概念 不 易 理 解 , 我 不 想 在 本 书 中 用 太 多 篇 幅 解 说 这 些 概 念 。 如 果 使 用 Angular 
的 话 ， 我 觉得 不 是 教 你 如 何 编写 MVC 代 码 ， 而 是 教 你 如 何 编 写 Angular 代 码 。 最 重要 的 一 点 是 ， 
我 希望 告诉 你 如 何 共享 泻 染 , 即 在 服务 器 和 浏览 器 中 重用 相同 的 逻辑 ,在 前 后 端 使 用 相同 的 视图 。 
可 是 对 服务 器 端 和 客户 端 共享 泻 染 来 说 ，Angular 不 是 最 好 的 选择 ， 因 为 开发 Angular 时 就 没 考虑 
到 这 个 需求 。 我 们 会 在 7.5 节 探讨 共享 泻 染 。 































































































理解 渐进 增强 

渐进 增强 这 项 技术 的 目的 是 为 每 个 访问 网 站 的 人 提供 舒适 的 体验 。 这 项 技术 建议 我 们 按 重 
要 程度 区 分 内 容 ， 然 后 逐渐 增强 内 容 ， 例 如 添加 额外 的 功能 。 使 用 渐进 增强 技术 的 应 用 ， 必 须 
完全 不 依靠 客户 端 JavaScript 泻 染 视图 就 能 显示 页 面 中 的 全 部 内 容 。 把 这 些 最 容易 理解 的 内 容 
提供 给 用 户 之 后 ， 可 以 检测 用 户 的 浏览 器 是 否 支 持 某 些 功能 ， 然 后 再 逐步 增强 用 户 体 验 。 提 供 
了 基本 的 用 户 体验 之 后 ， 我 们 还 可 以 使 用 客户 端 JavaScript 实 现 单 页 应 用 体验 。 

使 用 这 一 原则 开发 应 用 有 多 个 好 处 。 因 为 我 们 按照 重要 程度 区 分 了 内 容 , 从 而 访问 网 站 的 
每 个 人 都 能 获得 最 低 限度 的 用 户 体 验 。 这 并 不 意味 着 禁用 JavaScript 的 用 户 能 查看 网 站 ， 而 是 
说 在 移动 网 络 上 浏览 信息 的 人 能 更 快 地 看 到 内 容 。 而且， 如 果 请 求 JavaScript 脚 本 失败 了 ， 用 
户 看 到 的 网 站 至 少 还 是 可 阅读 的 。 

关于 渐进 增强 的 更 多 信息 请 阅读 我 博客 中 的 相关 文章 ， 地 址 是 http://ponyfoo.com/articles/ 
tagged/progressive-enhancement。 


React 比 Backbone 复 杂 ， 而 且 与 Angular 和 Backbone 不 同 的 是 ， 它 没有 提供 真正 的 MVC 方 案 。 
React 支 持 的 模板 功能 为 编写 视图 提供 了 帮助 ,但 如 果 想 把 React 专 门 当 成 MVC 引 擎 使 用 的 话 ， 需 
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要 我 们 自己 做 很 多 额外 工作 。 

相 比 之 下 ，Backbone 更 易于 逐步 学 习 。 编 写 简单 的 应 用 时 ， 无 需 使 用 Backbone 的 全 部 功能 。 
取得 进展 之 后 ,我 们 可 以 添加 更 多 的 组 件 ， 为 Backbone 提 供 额 外 的 功能 ,例如 路 由 ,而且 在 需要 
某 个 功能 之 前 我 们 根本 无 需 事 先 了 解 它 。 














7.2.2 ”安装 Backbone 


第 5 章 我 们 介绍 了 使 用 CommonJS 编 写 客户 端 代码 。 写 好 之 后 要 编译 模块 , 这 样 浏 览 器 才能 
释 。 下 一 节 会 使 用 Grunt 和 Browserify 制 定 一 个 自动 编译 过 程 。 现在 , 我 们 先 讨论 Backbone。 首先 ， 
我 们 需要 使 用 npm 安 装 Backbone。 

记 住 ， 如 果 没 有 package.json 文 件 ， 要 执行 apm init 命 令 创 建 。 如 果 遇 到 问题 ， 请 参阅 附录 
A 对 Node.js 的 介绍 。 












































npm install backbone --save 


Backbone 需 要 一 个 处 理 DOM 的 库 ， 例 如 jQuery 或 Zepto， 才 能 正常 使 用 。 我 们 会 在 示例 中 使 
用 jQuery， 因 为 它 更 为 人 熟知 。 如 果 考 虑 把 应 用 部 署 到 生产 环境 , 我 建议 你 看 一 下 Zepto， 因 为 它 
比 jQuery 小 。 下 面 我 们 来 安装 jQuery: 

npm install jquery --save 

安装 好 Backbone 和 jQuery 之 后 ， 可 以 开始 开发 应 用 了 。 首 先 ， 我 们 要 编写 几 行 代码 设置 
Backbone 库 。 使 用 Backbone 之 前 ,要 把 类 似 jQuery 的 库 赋值 给 Backbone .$， 因 此 我 们 要 这 么 写 : 


Var Backbone = require('backbone'); 
Backbone.s$ = require('jquery'); 


Backbone 使 用 jQuery 和 DOM 交 互 ， 用 于 依附 或 移 除 事件 句柄 ， 以 及 处 理 AJAX 请 求 。 我 们 要 
设置 的 就 这 么 多 。 

现在 该 看 看 怎么 使 用 Browserify 了 。 我 会 演示 如 何 设置 Grunt， 把 代码 编译 成 能 在 浏览 器 中 运 
行 的 格式 。 解 决 这 个 问题 后 ， 后 面 几 节 中 的 示例 就 能 顺畅 运行 了 。 















































7.2.3 ”使 用 Grunt 和 Browserify 编 译 Backbone 模 块 


我 们 在 第 5 章 的 5.3.3 节 已 经 接触 了 如 何 使 用 Browserify 编 译 模 块 。 下 列 代码 清单 是 那 时 
Gruntfile.js 文 件 中 Browserify 的 配置 。 


代码 清单 7.1 Gruntfile.js 文 件 中 Browserify 的 配置 
{ 


browserify: { 
debug: { 
files: { 'build/js/app.js': 'js/app.js' }, 
options: { 
debug: true 
} 
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} 
} 
} 


现在 ， 我 们 要 对 这 个 配置 作 两 处 小 调整 。 首 先 ， 我 们 想 监 视 变 动 ， 让 Grunt 重 新 构建 ， 打 包 
应 用 , 实现 第 3 章 介绍 的 持续 快速 开发 。 我 们 在 第 3 章 说 过 ,监视 变动 可 以 使 用 grunt-contrib- 
watch 包 ， 并 使 用 下 列 代码 配置 : 


{ 

















watch: { 

app: { 
files: 'app/**/*.js', 
tasks: ['browserify'] 


} 
} 


tasks 属 性 的 值 是 files 中 监视 的 文件 发 生变 化 时 要 执行 的 任务 。 

第 二 处 调整 要 用 到 一 种 转换 方式 ， 让 Browserify 把 模块 中 的 源码 转换 成 适合 在 浏览 器 中 运行 
的 格式 。 这 里 我 们 要 使 用 的 转换 方式 叫 brfs， 意思 是 “Browser File System”( 浏览 絮 文 件 系 统 )。 
这 种 转换 方式 会 内 联 fs .readFileSync 方 法 读 取 的 内 容 。 利 用 这 一 特性 可 以 把 视图 模板 和 
JavaScript 代 码 分 开 。 以 下 列 代码 为 例 : 

var fs = require('fs'); 

Var template = fs.readFileSync(_ dirname + '/template.html', { 


encoding: 'utf8' 


}); 






































console.log(template); 

这 段 代 码 无 法 在 浏览 器 中 运行 , 因为 浏览 器 不 能 访问 服务 器 文件 系统 中 的 文件 。 为 了 解决 这 
个 问题 ， 我 们 可 以 在 grunt -browserify 包 的 配置 选项 中 添加 brfs 转 换 方式 。 这 种 转换 方式 会 
读 取 fs .readFile 方 法 和 fs .readFileSync 方 法 的 参数 中 引用 的 文件 , 然后 把 文件 的 内 容 内 联 
在 打包 的 应 用 中 ， 让 这 些 文件 中 的 代码 在 Node 和 浏览 器 中 都 能 使 用 : 


options: { 
transfteorms: "DEES 
debug: true 

} 


我 们 还 需要 执行 下 列 命令 ， 在 本 地 项 目 中 使 用 npm 安 装 brfs 包 : 

npm install brfs --save-dev 

好 了 ， 现 在 Grunt 会 使 用 Browserify 编 译 CommonJS 模 块 了 。 接 下 来 我 要 介绍 Backbone 的 主要 
概念 、 各 个 概念 的 工作 方式 ， 以 及 何 时 使 用 它 。 





7.3 介绍 Backbone 


使 用 Backbone 开 发 应 用 时 要 理解 以 下 几 个 概念 。 
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口 视图 : 用 于 演 染 UT、 人 处理 用 户 的 交互 。 

口 模型 : 可 以 用 来 记录 、 计 算 和 验证 属性 。 

口 集合 : 是 一 组 有 序 的 模型 ， 用 于 和 列表 交互 。 
口 路 由 需 : 用 于 控制 URL、 开 发 单 页 应 用 。 

你 可 能 注意 到 了 ， 上 述 列表 没有 提 到 控制 器 。 其 实 ， 在 Backbone 中 ,视图 就 扮演 着 控制 器 的 
角色 。 这 是 MVC 的 一 个 小 分 支 ， 通常 称 为 模型 -视图 -视图 -模型 ( Model-View-View-Model， 简 
称 MVVM )。 图 7-3 说 明了 Backbone 和 传统 的 MVC 框 架 ( 如 图 7-2 ) 之 间 的 区 别 ， 还 说 明了 路 由 在 
这 种 架构 中 的 作用 。 





























Backbone 中 的 MVC 人 
路 下 理 程 序 可 以 
和 传统 MVC 之 间 的 区 别 0 





在 Backbone 中 ， 路 由 器 的 
作用 和 传统 的 MVC 模 式 中 
控制 器 的 作用 类 似 























视图 
Backbone 的 视图 控制 器 



























































视图 对 事件 作出 反应 ， 例 如 
事件 点 击 、 数 据 模型 发 生变 化 ， 
一 | 或 验证 
UI 层 事件 事件 句柄 
视图 负责 泻 染 用 户 界面 。 视 这 些 事件 由 视图 处 理 ， 修 改 
图 可 以 使 用 视图 模板 引擎， 事件 模型 、 或 者 把 用 户 重 定向 到 
也 可 以 使 用 jQuery > 其 他 视图 
图 7-3 ”Backbone 处 理 MVC 模 式 中 面向 用 户 部 分 ( 处 理事 件 、 验 证 和 演 染 UI ) 的 方式 

















显然 ， 每 个 概念 都 有 很 多 要 学 习 的 知识 。 下 面 我 们 一 个 一 个 讲 。 





7.3.1 Backbone 视 图 








视图 负责 泻 染 UI， 而 你 负责 编写 视图 的 演 染 逻辑 一 一 如 何 泻 染 UI 完全 取决 于 你 。 推 荐 使 用 
jQuery 或 模板 库 泻 染 。 

视图 始终 和 元 素 关 联 , 这 么 做 是 为 了 确定 在 什么 地 方 演 染 。 下 面 我 们 通过 下 列 代码 清单 来 看 
一 下 如 何 泻 染 一 个 简单 的 视图 。 我 们 创建 了 一 个 Backbone 视 图 ， 在 指定 的 元 素 中 显示 一 个 文本 ， 
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然后 实例 化 这 个 视图 ， 青 泻 染 这 个 视图 实例 。 


代码 清单 7.2 演 染 一 个 简单 的 视图 
Var SampleView = Backbone.View.extendl(t{ 
el: '.view', 
render: function () 
this.el.innerText 
} 
下 


{ 
oe oa 


Var sampleView = new SampleView(); 


sampleView.render (); 


看 到 怎么 声明 el 属性 ， 并 把 其 值 设 为 .view 了 吗 ? 我 们 把 这 个 属性 的 值 设 为 CSS 选 择 器 ， 
Backbone 就 会 在 DOM 中 查找 对 应 的 元 素 。 在 视图 中 ,这 个 元 素 可 以 通过 this .el 访问 。 在 HTML 
页 面 中 ， 如 下 所 示 ， 可 以 泻 染 这 个 极为 简单 的 Backbone 视 图 : 


<div class='view'></div> 
<script src='build/bundle.js'></script> 


bundle .js 脚本 文件 是 编译 后 打包 的 应 用 ,我 在 7.2.3 节 说 过 。 运 行 这 段 代 码 后 ，.view 元 素 
的 文本 内 容 会 变 成 foo。 本 书 的 配套 源码 中 有 这 个 示例 ， 在 ch07/01_backbone-views 文 件 夹 中 。 

视图 是 静态 的 ， 你 可 能 知道 如 何 使 用 jQuery 演 染 视图 ， 但 这 么 做 工作 量 大 ， 因 为 要 创建 每 个 
元 素 , 设置 各 元 素 的 属性 ， 还 要 在 代码 中 构筑 一 个 DOM 树 。 使 用 模板 的 话 ， 视 图 更 易于 维护 ， 
而 且 还 能 分 离 关 注 点 。 我 们 来 看 怎么 使 用 模板 。 

使 用 Mustache 模 板 

Moustache 是 一 个 视图 模板 库 ， 作 用 是 把 模板 字符 串 和 视图 模型 演 染 成 视图 。 在 模板 中 引用 模 
型 中 的 值 ， 要 使 用 特殊 的 符号 一 一 { {value}}， 这 个 符号 会 被 殖 换 成 模型 中 value 属 性 的 值 。 

Mustache 还 支持 使 用 类 似 的 句法 迭代 数组 .把 模板 中 的 部 分 代码 放 在 { {#collection}} 和 
{{/collection}} 之 间 。 迭 代 集 合 时 可 以 使 用 {{.}} 获 取 集合 中 的 元 素 ， 而 且 可 以 直接 访问 元 
素 的 属性 。 

下 面 是 一 个 简单 的 HTML 视 图 模板 : 


<p>Hello {{name}}, your order #{{orderIid}} is now shipping. Your order 
includes:</p> 
























































































































































ULS 
{{#items}} 
LT 
{{/items}} 
</ul> 


为 了 填充 这 个 模板 ,我们 要 使 用 Mustache， 把 它 传 给 一 个 模型 。 首 先 ， 我们 要 从 npm 中 安装 
Mustache: 


npm install mustache --save 
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若 想 演 染 这 个 模板 ， 只 需 把 模板 字符 串 和 视图 模型 传 给 Mustache: 


Var Mustache = require('mustache'); 
Mustache.to_html (template, viewModel); 


为 了 在 Backbone 中 使 用 Mustache 演 染 视 图 ,我 们 可 以 创建 一 个 可 重用 的 模块 ， 如 下 列 代码 片 
段 所 示 。 这 个 模块 知道 要 使 用 Mustache 演 染 所 有 视图 ， 并 把 视图 模板 和 视图 模型 传 给 Mustache。 
在 这 段 代码 中 , 我 们 创建 了 一 个 基 视 图 ， 其 他 视图 可 以 继承 这 个 视图 ,共用 一 些 基本 的 功能 ， 例 
如 视图 泻 染 ， 这 样 就 不 用 把 这 个 方法 复制 粘贴 到 你 所 创建 的 每 个 视图 中 了 : 


Var Backbone 
Var Mustache 
































= require('backbone'); 
= require('mustache'); 
module.exports = Backbone.View.extendl(t{ 
render: function () { 
this.el.innerHTML = Mustache.to_ html (this.template, this.viewModel); 
} 
J 


在 前 面 的 示例 中 , 我 们 编写 的 是 静态 视图 ， 可 以 把 应 用 的 所 有 代码 都 放 在 一 个 模块 中 。 不 过 
从 现在 开始 , 我 们 要 稍微 模块 化 一 下 。 使 用 基 视 图 是 很 干净 利落 的 做 法 ,不 过 一 个 模块 中 写 一 个 
视图 也 一 样 重要 。 在 下 列 代码 片段 中 , 我 们 加 载 刚才 编写 的 基 视 图 模板 ， 并 在 这 个 基 视 图 的 基础 
上 扩展 。 加 载 Mustache 模 板 使 用 的 是 fs .readFilesync 方 法 ， 因 为 require 只 能 用 于 加 载 
JavaScript 和 JSON 文 件 。 我 们 没 把 那个 模板 放 在 这 个 视图 模块 中 ， 因 为 最 好 分 离 关 注 点 ， 尤 其 是 
涉及 不 同 的 语言 时 更 要 这 么 做 。 而 且 ， 视 图 模板 可 能 会 在 多 个 视图 中 使 用 。 

Var fs = require('fs'); 

Var base = require('./base.js'); 

Var template = fs.readqFileSync( 


_ dirname + '/templates/sample.mu', 'utf8' 


) 3 



































module.exports = base.extendl(t{ 
el: '.view', 
template: template 























}) 
最 后 , 我们 要 修改 原先 那个 应 用 模块 ， 导入 这 个 视图 而 不 是 直接 声明 ,并 在 演 染 视图 之 前 声 
明 视 图 模型 。 现 在 ， 视 图 会 使 用 Mustache 演 染 ， 如 下 列 代 码 清 单 所 示 。 


代码 清单 7.3 ”使 用 Mustache 演 染 视 图 
var SampleView 
var sampleView 


= require('./views/sample.js'); 
= new SampleView!(); 
sampleView.viewModel = { 
name: 'Marian', 
orderId: '1234', 
items: [ 
'1 Kite', 
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'2 Manning Books', 
'7 Random Candy', 
'3 Mars Bars' 
] 
3 


sampleView.render (); 


本 书 的 配套 源码 中 有 这 个 示例 ， 在 ch07/02_backbone-view-templates 文 件 夹 中 。 接 下 来 ,我们 
要 创建 模型 。 模 型 是 Backbone 应 用 男 一 个 重要 的 组 成 部 分 。 








7.3.2 ”创建 Backbone 模 型 


Backbone 模 型 (也 叫 数据 模型 ) 用 于 保存 应 用 中 的 数据 ， 通 常 是 数据 库 中 数据 的 副本 。 
Backbone 模 型 可 以 监视 变动 ,还 能 验证 变动 。 别 把 Backbone 模 型 和 视图 模型 ( 例如 前 面 示例 中 赋 
值 给 sampleview.viewModel 的 数据 , 也 叫 模板 数据 ) 混淆 了 , 视图 模型 通常 包含 多 个 Backbone 
数据 模型 ， 而 且 往往 使 用 特定 的 格式 ， 以 便 在 HTML 模板 中 使 用 。 例 如 ， 日 期 在 数据 模型 中 可 能 
以 ISO 格式 存储 ， 但 在 模板 数据 中 会 改 成 人 类 可 读 的 字符 串 格 式 。 视 图 扩展 自 Backpbone .View， 
类 似 地 , 模型 扩展 自 Backbone .Model, 而 且 还 可 以 进一步 和 数据 交互 。 模 型 可 以 验证 用 户 的 输 
入 , 拒绝 不 良 数据 ; 可 以 监视 变动 , 在 数据 模型 有 变动 时 作出 反应 ; 而 且 我 们 还 可 以 根据 模型 中 
的 数据 计算 属性 的 值 。 

在 模型 能 做 的 事情 中 , 最 有 影响 力 的 或 许 是 监视 模型 中 数据 的 变动 。 使 用 这 个 功能 ,数据 发 
生变 化 时 , UI 不 用 做 多 少 事 就 能 对 此 作出 反应 记 住 , 同样 的 数据 可 以 使 用 多 种 不 同 的 方式 表示 。 
例如 ,同样 的 数据 可 以 表示 成 列表 中 的 元 素 、 图 像 或 描述 信息 。 数 据 发 生变 化 时 ,模型 能 实时 更 
新 各 种 表示 方式 。 

1. 数据 模型 和 可 塑性 

我 们 来 看 一 个 示例 (在 本 书 配套 源码 的 ch07/03_backbone-models 文 件 夹 中 )。 在 这 个 示例 中 ， 
我 们 读 取 用 户 的 输入 , 将 其 当成 二 进 制 纯 文本 ， 如 果 是 URL 的 话 ， 则 当成 错 记 链接 。 首 先 ， 我 们 
要 创建 一 个 模型 ， 检 查 用 户 输入 的 数据 像 不 像 链 接 。 在 Backbone 中 ， 我 们 使 用 get 方 法 获取 模型 
中 属性 的 值 。 


module.exports = Backbone.Model .extend(t{ 
1SDink:- funetion () 
Var link = /^https?:\/\/.+/i; 
Var raw = this.get('raw'); 
return link.test (raw); 
} 
3 


假如 有 个 binary .fromstring 方 法 ， 用 于 把 模型 数据 转换 成 二 进 制 学 符 串 ， 而 我 们 想 获 取 
二 进 制 流 的 前 几 个 字符 ,那么 可 以 定义 一 个 模型 方法 来 实现 这 个 操作 , 因为 这 是 数据 相关 的 操作 。 
根据 经 验 ， 如 果 方 法 可 以 重用 ， 而 且 只 (或 主要 ) 依赖 模型 数据 ,那么 最 好 定义 成 模型 方法 。 获 
取 二 进 制 字符 串 前 几 个 字符 的 方法 可 以 像 下 列 代码 那样 实现 。 如 果 二 进 制 码 超过 20 个 字符 , 可 以 
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将 其 截断 ， 并 在 后 面 加 上 Unicode 省 略 号 ， 即 '\u2026' 或 '...'。 


getBinary: function () { 
var raw this.get('raw'); 
var bin binary.fromString (raw); 
if (bin.length > 20) { 
return bin.substr(0, 20) + '\u2026'; 
} 
return bin; 


} 

前 面 我 提 到 过 ， 我 们 可 以 监视 模型 的 变动 。 下 面 进一步 学 习 事 件 。 

2. 模型 和 事件 

为 了 把 视图 和 模型 联系 在 一 起 ,我们 需要 创建 模型 的 实例 。 模 型 最 有 趣 的 功能 之 一 是 事件 。 
例如 , 我们 可 以 监视 模型 的 变动 , 一旦 模型 发 生变 化 就 更 新 视图 ,我 们 可 以 在 视图 的 initialize 
届 性 中 创建 模型 实例 ,并 把 监听 器 绑 定 到 模型 实例 上 ， 再 为 模型 提供 一 个 初始 值 ， 如 下 列 代 码 片 
段 所 示 : 


initialize: function () { 
this.model = new SampleModel (); 
this.model.on('change', this.updateView, this); 
this.model.set('raw', 'http://bevacqua.io/buildfirst'); 
} 


我 们 无 需 从 外 部 发 出 指令 泻 染 视图 ， 因 为 只 要 模型 中 的 数据 有 变化 ,视图 就 会 自行 渲染 。 这 
种 机 制 很 容易 实现 ， 只 要 模型 中 的 数据 有 变化 ， 就 会 调用 upaateview 方 法 。 借 此 机 会 我 们 可 以 
更 新 视图 模型 ， 使 用 更 新 后 的 值 泻 染 模板 。 


updateView: function () { 
this.viewModel = { 
raw: this.model.get ('raw'), 
binary: this.model.getBinary (), 
isLink: this.model.isLink!() 
}; 


this.render(); 









































} 


现在 ,我 们 要 做 的 就 只 剩 下 用 用 户 的 输入 修改 模型 。 我 们 可 以 把 键 值 对 添加 到 视图 的 events 
嚼 性 中 ， 绑 定 DOM 事 件 。 键 值 对 的 键 应 该 使 用 {event -type} {element-selector} 格 式 , 例 
如 click .submit-button; 键 对 应 的 值 是 在 视图 中 可 用 的 事件 句柄 的 名 称 。 在 下 列 代 码 片段 
中 ， 我 实现 的 事件 句柄 会 在 输入 的 内 容 发 生变 化 后 更 新 模型 ; 

events: { 

'change .input': 'inputChanged' 
} 
inputChanged: function (e) { 


this.model.set('raw', e.target.value); 


} 
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只 要 触发 了 change 事 件 ， 模 型 中 的 数据 就 会 更 新 。 模 型 中 的 数据 发 生变 化 又 会 触发 模型 的 
change 事 件 监听 器 更 新 视图 模型 以 及 刷新 UI。 记 住 ， 如 果 通 过 其 他 方式 修改 了 模型 中 的 数据 ， 
例如 把 数据 发 给 服务 器 ,也 会 相应 地 刷新 UI。 这 就 是 模型 的 价值 所 在 。 数 据 变 复杂 后 ， 使 用 模型 
访问 数据 的 好 处 更 多 ， 因 为 代码 无 需 紧密 耦合 就 能 跟踪 数据 的 变化 ， 并 对 变化 作出 反应 。 

这 是 模型 帮助 塑造 数据 的 方式 之 一 ,能 避免 在 代码 中 重复 实现 相同 的 逻辑 。 我 们 在 后 面 的 几 
节 会 进一步 探讨 使 用 模型 的 好 处 ,例如 模型 能 验证 数据 。 关 于 数据 组 织 还 剩 最 后 一 个 话题 一 一 集 
合 。 下 一 节 简 单 介绍 集合 ， 之 后 再 讲解 视图 路 由 。 













































































7.3.3 ”使 用 Backbone 集 合 组 织 模型 


在 Backbone 中 , 集合 的 作用 是 把 一 系列 模型 聚集 在 一 起 ， 并 对 这 些 模型 排序 。 我 们 可 以 监听 
集合 中 元 素 的 增删 , 修改 集合 中 的 模型 后 其 至 还 能 收 到 通知 。 模型 有 助 于 根据 其 中 的 属性 值 计算 
出 数据 ， 而 集合 关注 的 是 找到 特定 的 模型 ， 并 人 处理 CRUD ( Create Read Update Delete， 创 建 一 读 
取 - 更 新 -删除 ) 等 操作 。 
集合 中 的 元 素 属于 特定 模型 类 型 ， 因 此 我 们 可 以 把 普通 的 对 象 添加 到 集合 中 , 这 个 对 象 在 内 
部 会 转换 成 相应 的 模型 类 型 。 例 如 ， 对 下 列 代 码 片 段 创建 的 集合 来 说 ,每 次 把 元 素 添 加 到 集合 中 
都 会 创建 sampleModel 实 例 。 这 个 使 用 集合 的 示例 在 本 书 配 套 源码 的 ch07/04_backbone- 
collections 文 件 夹 中 。 
















































































var SampleModel = require('../models/sample.js'); 


module.exports = Backbone.Collection.extendl({ 
model: SampleModel 
9 各 


与 模型 和 视图 类 似 , 集合 在 使 用 之 前 也 要 先 实例 化 。 为 了 让 这 个 示例 简短 一 些 , 我 们 会 在 视 
图 中 创建 这 个 集合 的 实例 ， 监 听 插 入 操作 ， 然 后 把 儿 个 模型 添加 到 这 个 集合 中 。toJsoN 方 法 的 
作用 是 把 集合 强制 转换 成 普通 的 JavaScript 对 象 , 以 便 在 演 染 模板 时 从 模型 中 获取 数据 , 如 下 列 代 
码 清单 所 示 。 


代码 清单 7.4 获取 模型 数据 
initialize: function () { 

var collection = new SampleCollection(); 
collection.on('add', this.report); 
collection.add({ name: 'Michael' }); 
collection.add({ name: 'Jason' }); 
collection.add({ name: 'Marian' }); 
collection.add({ name: 'Candy' }); 
this.viewModel = { 

title: 'Names', 

people: collection.toJSON() 

}; 


this.render(); 
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report: function (model) { 
Var name = model.get ('name'); 
console.log('Someone got added to the collection:', name); 


} 
集合 还 可 以 对 插入 的 模型 进行 验证 ， 这 个 功能 会 在 7.4 节 介绍 。 我 们 的 清单 中 还 有 最 后 一 个 
概念 没 讲 ， 即 Backbone 路 由 器 。 


7.3.4 添加 Backbone 路 由 器 


如 今 ， 单 页 应 用 越 来 越 多 。 网 站 只 需 加 载 一 次 ,不 用 在 客户 端 和 服务 器 之 间 多 次 往返 ， 都 交 
给 客户 端 代 码 处 理 即 可 。 在 客户 端 做 路 由 可 以 通过 修改 URL 中 哈 希 符号 之 后 的 内 容 实现 , 也 可 以 
使 用 类 似 #/users 或 #Wusers/13 这 样 的 路 径 。 在 现代 浏览 器 中 , 我 们 无 需 借助 哈 希 符号 , 使 用 历史 API 
就 能 修改 URL， 这样 得 到 的 链接 更 简洁 ， 就 像 从 服务 器 获取 的 一 样 。Backbone 中 的 路 由 器 有 两 个 
作用 : 修改 URL,， 为 用 户 提供 固定 链接 ， 以 便 访 问 网 站 的 特定 部 分 ; 在 URL 发 生变 化 后 执行 相应 
的 动作 。 

图 7-4 说 明了 路 由 需 跟踪 应 用 状态 的 方式 。 


























































































































路 由 
Backbone 路 由 器 的 工作 方式 路 由 器 声明 路 由 ， 然 后 定义 路 由 对 
应 的 动作 
ns "getHome” 
'/items':'getItems,' 
路 由 器 '/item/id':'getItemById' 
'/item/new' :'addIitem' 
路 由 器 定义 路 由 和 动作 ， 还 能 
宕 堆 胸 由 节 本 灾 云 
i 路 由 器 可 以 使 用 动态 参数 ， 例 如 上 
面 的 :ia 
路 由 变动 
Backbone 路 由 器 会 监视 URL 的 变动 




















动作 处 理 程序 会 加 载 所 需 的 
模型 数据 ， 然 后 浑 染 视图 


监视 器 rn Satel 

































































路 由 器 监视 URL 的 变动 。URL 如 果 路 由 中 有 参数 ， 参 数 会 

变动 时 ， 路 由 圳 会 寻找 匹配 的 传 给 动作 。 动 作 会 使 用 路 

动作 ， 然 后 触发 动作 处 理 程序 中 的 参数 向 服务 器 请 求 模型 
数据 














图 7-4 Backbone 的 路 由 和 路 由 监视 器 


我 们 在 7.1 节 提 过 ， 路 由 器 是 用 户 访问 应 用 时 到 达 的 第 一 站 。 传 统 路 由 器 定义 的 规则 把 请 求 
发 给 特定 的 控制 器 动作 。 但 在 Backbone 中 , 起 中 间 人 作用 的 控制 器 不 存在 ， 路 由 器 会 直接 把 请 求 
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发 给 视图 处 理 。 在 Backbone 中 ， 视 图 除了 提供 视图 模板 和 泻 染 逻辑 之 外 ， 还 兼 具 控制 硕 的 作用 。 
Backbone 路 由 器 会 监视 1ocation 的 变动 ， 然 后 调用 相应 的 动作 ， 为 动作 提供 相关 的 URL 人 参数 。 
1. 路 由 变动 
下 列 代码 片段 (在 本 书 配套 源码 的 ch07/05 backbone-routing 文 件 夹 中 ) 实例 化 一 个 视图 路 由 
器 ， 然 后 使 用 Backbone.history.start 方 法 监视 URL 的 变动 。 这 段 代码 还 会 检查 当前 URL 是 
否 匹 配 定义 好 的 某 个 路 由 ， 如 果 有 匹配 的 路 由 就 触发 那 条 路 由 。 


Var ViewRouter = require('./routers/viewRouter.js'); 
new ViewRouter(); 




















s(function () { 
Backbone.history.start(); 


}); 

只 要 线路 正常 ， 我 们 就 只 需 做 这 么 多 。 下 面 编写 ViewRouter 组 件 。 

2. 路 由 模块 

路 由 器 的 作用 是 把 每 个 URL 和 动作 连接 起 来 。 开发 应 用 时 , 我 们 通常 会 在 动作 中 准备 并 演 染 
视图 , 或 者 做 些 其 他 事 , 例如 转向 其 他 路 由 。 在 下 列 代码 片段 中 ,我 们 创建 了 一 个 包含 多 个 路 由 
的 路 由 器 : 


Var Backbone = require('backbone'); 
























































module.exports = Backbone.Router.extend(t{ 
routes: { 


“EGO 
'items': 'items', 
'items/:id': 'getItemById' 


} 
9) 


用 户 访问 应 用 的 根 地 址 时 匹配 的 是 第 一 个 路 由 , 会 把 用 户 重 定向 到 默认 路 由 。 这 个 路 由 的 定 
义 如 下 列 代 码 片 段 所 示 ,， 把 用 户 重 定向 到 了 items 路 由 。 这 样 做 是 为 了 确保 直接 访问 根 地 址 时 不 
会 产生 困惑 ， 而 不 是 访问 #items 或 /items (如 果 使 用 历史 API 的 话 )。trigger 选 项 告诉 

































































navigate 方 法 要 更 换 URL, 然后 触发 那个 路 由 的 动作 。 我 们 要 把 root 方 法 添加 到 传 给 Backbone . 
Router .extend 方 法 的 对 象 中 
root: function () { 
this.navigate('items', { trigger: true }) 


} 


只 要 所 有 视图 都 在 相同 的 视图 容器 中 泻 染 , 在 触发 的 动作 中 只 需 实例 化 视图 就 行 了 ,如 下 列 
代码 片段 所 示 : 


items: function () { 
new ItemView(); 


} 
我 们 要 在 路 由 模块 的 顶部 使 用 require 导 入 这 个 视图 ， 如 下 所 示 : 

















图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


7.4 案例 分 析 : 购物 清单 157 





Var ItemView = require('../views/item.js'); 


最 后 , 你 可 能 注意 到 了 ,在 触发 get ItemByIg 动 作 的 路 由 中 有 个 具名 参数 : id。 路 由 器 
会 在 视图 中 解析 匹配 items/ :ia 模式 的 URL， 调 用 动作 时 会 把 id 作为 参数 传 给 动作 ， 以 便 在 渔 
染 视图 时 使 用 这 个 参数 : 

getItemById: function (idq) { 


new DetailView(id) ; 


} 

关于 视图 路 由 我 们 先 讲 这 么 多 。 在 7.4 节 中 ， 我 们 会 在 这 些 概念 的 基础 上 开发 一 个 小 型 应 用 
接 下 来 ， 我 们 要 探讨 如 何 利 用 刚 学 会 的 Backbone 知 识 ， 使 用 MVC 模 式 开发 一 个 在 浏览 
的 应 用 。 


7.4 案例 分 析 : 购物 清 * 


在 你 合 上 书 去 开发 自己 的 应 用 之 前 , 我 想 结合 目前 本 章 介绍 过 的 全 部 知识 , 通过 一 个 完整 的 
示例 告诉 你 如 何 使 用 Backbone 编 写 符合 MVC 模 式 的 应 用 。 

本 节 一 步 步 说 明 如 何 开发 一 个 简单 的 购物 清单 应 用 。 在 这 个 应 用 中 , 我 们 可 以 查看 购物 清单 
中 的 物品 ， 把 物品 从 清单 中 删除 ， 添 加 新 物品 ， 还 能 修改 要 购买 的 数量 。 我 把 整个 过 程 分 成 了 五 
步 ， 每 一 步 我 们 都 会 添加 一 些 功能 ， 再 重 构 现 有 的 功能 ， 以 保持 代码 的 整洁 。 这 五 步 分 别 是 : 
口 创建 静态 视图 ， 列 出 购物 清单 中 的 物品 ; 
口 添加 删除 按钮 ， 用 于 删除 物品 ; 
口 构建 一 个 表单 ， 把 新 物品 添加 到 购物 清单 中 ; 
口 实现 行内 编辑 功能 ， 修 改 物品 的 数量 ; 
口 添加 视图 路 由 。 
这 看 起 来 是 个 有 趣 的 过 程 。 记 住 ， 这 五 步 编 写 的 代码 在 本 书 的 配套 源码 中 都 有 。 


7.4.1 从 静态 购物 清单 开始 


现在 我 们 从 头 开始 开发 这 个 应 用 。Gruntfilejs 文 件 的 内 容 从 7.2.3 节 开始 一 直 没 变 ， 在 开发 这 
个 应 用 的 过 程 中 我 们 不 会 修改 这 个 文件 ， 因 此 不 用 管 它 。 我 们 从 代码 清单 7.5( 在 ch07/06_ 
shopping-list 文 件 夹 中 ) 中 的 HTML 开 始 。 注 意 ， 我 们 引入 了 Browserify 编 译 得 到 的 打包 文件 ， 让 
Common.js 代 码 能 在 浏览 器 中 使 用 。<aiv> 是 这 个 应 用 的 视图 容器 。 这 些 HTML 保 存在 app.html 
文件 中 。 这 是 个 单 页 应 用 ， 只 需要 一 个 文件 。 


代码 清单 7.5 ”创建 购物 清单 
<!dqoctype html> 
<html> 
<head> 
<title>Shopping List</title> 
</head> 

















说 
二 
和 
二 
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<body> 
<h1>Shopping List</h1l> 
<div class='view'></div> 
<script src='build/bundle.js'></script> 
</body> 
</html> 


接 下 来 ， 这 个 应 用 需要 泻 染 一 个 待 购物 品 列表 ， 显 示 每 个 物品 的 名 称 和 数量 。 下 列 Mustache 
模板 片段 能 泻 染 购物 清单 中 的 物品 。 我 们 把 Mustache 模 板 保存 在 views/templates 目 录 中 。 





LS 
{{#shopping_list}} 
<li>{{quantity}}x {{name}}</1i> 
{{/shopping_list}} 
</ul> 
视图 要 使 用 视图 模型 演 染 模板 。 这 个 功能 应 该 只 实现 一 次 ， 所 以 要 使 用 基 视 图 。 
1. 使 用 Mustache 泻 染 视图 
为 了 便于 在 视图 中 泻 染 Mustache 模 板 ， 避 免 重复 ， 我 们 可 以 编写 一 个 基 视 图 ， 将 其 保存 在 
views 目 录 中 。 我 们 要 在 基 视 图 中 实现 每 个 视图 都 会 用 到 的 功能 ， 让 其 他 视图 扩展 这 个 基 视 图 。 
如 果 视 图 需要 使 用 其 他 方式 演 染 也 可 以 ,覆盖 render 方 法 即 可 。 

















require('backbone'); 
require('mustache'); 


var Backbone 
var Mustache 


module.exports = Backbone.View.extendl(t{ 


render: function () { 
this.el.innerHTML = Mustache.to_ html (this.template, this.viewModel); 


} 
ss 
接 下 来 要 创建 物品 ， 供 1ist 视 图 使 用 。 
2. 购物 清单 视图 
现在 , 创建 静态 的 购物 清单 就 足够 了 , 所 以 在 下 列 代码 清单 中 创建 视图 模型 对 象 之 后 就 不 用 
管 了 。 注 意 ， 实 例 化 视图 后 会 执行 initialize 方 法 ， 所 以 创建 这 个 视图 后 它 会 自我 泻 染 。 这 个 
视图 使 用 前 面 创建 的 模板 ， 然 后 把 泻 染 结果 放 到 app.html 文 件 的 .view 元 素 中 。 


代码 清单 7.6 ”创建 物品 清单 
var fs = require('fs'); 
Var base = require('./base.js'); 
Var template = fs.readFileSync!( 
_ dirname + '/templates/list.mu', { encoding: 'utf8' } 
jj 




















module.exports = base.extendl({ 
el: '.view', 
template: template, 
viewModel: { 
shopping_list: [ 
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name: 'Banana', quantity: 3 }, 

name: 'Strawberry', quantity: 8 }, 
name: 'Almond', quantity: 34 }, 
name: 'Chocolate Bar', quantity: 1 } 


一 一 一 一 


] 
} 
TnitialliSes, Functlion: () 二 
this.render(); 
} 
})s 
最 后 ,我们 要 实例 化 应 用 。 如 下 列 代 码 所 示 ,我 们 先 实例 化 Backbone ,然后 创建 一 个 ListView 
实例 。 注 意 ， 视 图 会 自行 泻 染 ， 所 以 只 需 实例 化 视图 即 可 。 
Var Backbone = require('backbone'); 
Backbone.$ = require('jquery'); 


Var ListView = require('./app/views/list.js'); 
Var list = new ListView(); 


我 们 为 这 个 购物 清单 应 用 奠定 好 了 基础 。 在 此 之 上 , 我 们 要 进入 下 一 步 : 添加 删除 按钮 ， 还 
要 重 构 ， 以 实现 动态 的 应 用 ， 人 允许 使 用 者 修改 数据 。 


7.4.2 添加 删除 按钮 


这 一 步 首先 要 修改 视图 模板 , 添加 删除 按钮 ， 把 物品 从 购物 清单 中 删除 。 我 们 为 按钮 设 定 了 
data-name 属 性 ， 用 于 标识 要 从 清单 中 删除 哪个 物品 。 修 改 后 的 模板 如 下 列 代码 片段 所 示 : 
<ul> 
{{#shopping_list}} 
< 
<span>{{quantity}}x {{name}}</span> 
<button class='remove' data-name='{{name}}'>x</button> 
AALS 
{{/shopping_list}} 
A 


在 实现 删除 功能 之 前 ， 我 们 要 创建 一 个 适当 的 模型 和 集合 。 

1. 使 用 模型 和 集合 

通过 集合 我 们 可 以 监视 清单 的 变动 , 例如 从 清单 中 删除 物品 。 而 模型 用 于 跟踪 个 体 层面 的 变 
动 , 还 可 以 验证 数据 、 做 计算 ,在 后 面 几 步 中 我 们 会 用 到 这 些 功 能 。 对 这 个 应 用 来 说 ,我 们 只 需 
要 使 用 一 个 标准 的 Backbone 模 型 。 如 果 需 要 使 用 多 个 模型 ， 最 好 把 各 个 模型 严格 分 开 ， 放 在 不 同 
的 模块 中 ， 而 且 要 为 模块 起 个 合适 的 名 称 。 我 们 把 shoppingItem 模 型 保存 在 models 目 录 中 。 


Var Backbone = require('backbone'); 



































module.exports = Backbone.Model.extend ({ 
二 


集合 也 没什么 特别 的 地 方 ， 它 需要 引用 这 个 模型 。 这 样 ， 把 新 对 象 插入 清单 时 ， 集 合 才 知道 
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要 创建 哪个 模型 。 为 了 有 序 组 织 ， 我 们 把 集合 放 在 collections 目 录 中 。 


Var Backbone = require('backbone'); 
var ShoppingItem = require('../models/shoppingItem.js'); 


module.exports = Backbone.Collection.extendl({ 
model: ShoppingItem 
3 


现在 我 们 已 经 创建 了 模型 和 集合 ,不 能 再 直接 创建 视图 模型 ， 然 后 一 劳 永 逸 了 。 我 们 要 修改 
视图 ， 换 用 人 集合。 首先， 在 视图 中 要 使 用 require 导 入 集合 ， 如 下 列 代码 所 示 : 


var ShoppingList = require('../collections/shoppingList.js'); 


然后 ， 从 现在 开始 我 们 要 删除 viewModel 属 性 ,动态 设 定 视图 模型 ， 并 在 collection 属 性 
中 创建 模型 数据 。 注 意 ， 前 面 说 过 ， 对 这 个 集合 来 说 ,不 用 明确 指明 创建 的 是 shoppingList 实 
例 ， 因 为 集合 已 经 知道 要 使 用 的 模型 类 型 了 。 


collection: new ShoppingList([ 
{ name: 'Banana', quantity: 3 }, 
{ name: 'Strawberry', quantity: 8 }, 
{ name: 'Almond', quantity: 34 }, 
{ name: 'Chocolate Bar', quantity: 1 } 









































] ) 
然后 , 我们 要 在 视图 首次 加 载 时 更 新 UI。 为 此 ,我们 要 把 视图 模型 设 为 集合 中 的 值 ， 然 后 泻 

染 视 图 。toJsoN 方 法 的 作用 是 把 模型 对 象 集合 转换 成 普通 的 数组 。 
initialize: function () { 


this.viewModel] = { 
shopping_list: this.collection.toJSON() 




















3 
this.render(); 


} 

最 后 ， 我 们 来 实现 删除 功能 。 

2. 在 Backbone 中 处 理 DOM 事 件 

为 了 监听 DOM 事 件 ,我 们 可 以 在 视图 的 events 对 象 中 添加 属性 。 属 性 的 名 称 由 事件 名 和 CSS 
选择 器 组 成 ,而且 二 者 之 间 要 用 一 个 空格 分 开 。 我 们 要 把 下 列 代码 添加 到 视图 中 。 添 加 这 上 段 代 码 
后 ,在 匹配 .remove 选 择 符 的 元 素 上 发 生 click 事 件 后 会 触发 指定 的 动作 。 记 住 , 这 些 事件 寻找 
的 元 素 在 el 属性 设 定 的 元 素 中 , 在 这 个 示例 中 是 前 一 步 创 建 的 <div> 元 素 , 而 不 会 触发 在 此 之 外 
的 元 素 身 上 的 事件 。 最 后 ， 我 们 要 把 属性 的 值 设 为 视图 中 某 个 方法 的 名 称 。 

events: { 


'click .remove': 'removeltem' 


} 
现在 我 们 要 使 用 一 个 过 滤 集 合 的 方法 来 定义 removeItem 方 法 。 按钮 可 通过 e 3 target 获 取 ， 
物品 的 名 称 则 通过 aata-name 属 性 获取 。 然后 使 用 这 个 名 称 过 滤 集 合 , 找到 购物 清单 中 按钮 对 应 
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的 物品 。 


removeItem: function (e) { 
Var name = e.target.dataset .name; 
Var model = this.collection.findWhere({ name: name }); 
this.collection.remove (model); 


} 

从 集合 中 删除 模型 后 , 要 更 新 视图 。 不 要 天 真 地 以 为 从 集合 中 删除 元 素 后 直接 更 新 视图 模型 
再 泻 染 视图 就 行 了 。 这 样 做 有 个 问题 ， 既 应 用 中 可 能 有 多 个 地 方 要 把 元 素 从 集合 中 删除 ， 从 而 会 
导致 代码 重复 。 更 好 的 方法 是 监听 集合 发 出 的 事件 。 此 时 ， 我 们 可 以 监听 集合 的 remove 事 件 ， 
触发 这 个 事件 时 刷新 视图 。 

下 列 代 码 清单 在 初始 化 视图 时 设置 一 个 事件 监听 器 ， 而 且 还 做 了 重 构 ,， 去除 重复 的 代码 ， 忠 
实地 遵守 DRY 原 则 。 


代码 清单 7.7 ”设置 事件 监听 天 


initialize: function () { 













































































this.collection.on('remove', this.updateView, this); 
this.updateView(); 

} 
updateView: function () { 

this.viewModel = { 

shopping_list: this.collection.toJSON() 








> 
this.render(); 


} 

这 一 节 我 们 讲 了 很 多 内 容 。 现 在 你 或 许 应 该 看 一 下 本 书 配 套 源码 中 ch07/07_the-one-with- 
delete-buttons 文 件 夹 里 的 代码 ， 这 是 做 完 这 一 步 后 得 到 的 代码 。 下 一 步 要 创建 一 个 表单 ， 让 用 户 
把 物品 添加 到 购物 清单 中 。 


7.4.3 ”把 物品 添加 到 购物 车 中 


前 一 步 我 们 实现 了 从 购物 清单 中 删除 物品 的 功能 , 这 一 步 我 们 要 实现 添加 新 物品 的 功能 , 让 
用 户 不 仅 能 删除 不 想 购 买 的 物品 ， 还 能 添加 想 购 买 的 物品 。 

为 了 让 实现 的 过 程 变 得 有 趣 , 我 们 还 要 提出 一 个 需求 : 添加 新 物品 时 ， 要 确保 清单 中 之 前 没 
有 这 个 物品 的 名 称 ; 如 果 购 物 清 单 中 已 经 列 出 了 某 个 物品 , 那么 我 们 需要 增加 这 个 现 有 物品 的 数 
量 。 这 个 要 求 能 避免 重复 添加 相同 的 物品 。 

1. 创建 “添加 到 购物 车 ”组 件 

为 了 把 商品 添加 到 清单 中 ,我 们 需要 编写 如 下 列 代 码 清单 所 示 的 HTML。 这 个 示例 在 ch07/08_ 
creating-items 文 件 夹 中 。 我 们 要 使 用 几 个 输入 框 ， 还 有 一 个 按钮 ， 把 物品 添加 到 购物 清单 中 。 这 
段 HTML 中 还 有 一 个 元 素 只 会 在 出 错时 显示 ， 其 作用 是 显示 验证 输入 时 出 现 的 错误 消息 。 为 简单 
起 见 , 我 们 暂且 把 这 段 HTML 放 在 1ist 模 板 中 。 后面 几 步 会 重 构 , 把 这 段 代码 移 到 单独 的 视图 中 。 
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代码 清单 7.8 创建 “添加 到 购物 车 ”组 件 


<fieldset> 
<legend>Add Groceries</legend> 
<label>Name</label> 
<input class='name' value='{{name}}' /> 
<label>Quantity</label> 
<input class='gquantity' type='number' value='{{quantity}}' /> 
<button class='add'>Add</button> 
{{#error}} 
<p>{{error}}</p> 
{{/error}} 

</fieldset> 








目前 为 止 我 们 都 没 修改 模型 。 虽然 删除 了 物品 , 但 从 未 更 新 模型 。 现 在 ,用户 可 以 修改 模型 





了 ， 所 以 是 时 候 添 加 验证 了 。 
2. 验证 输入 


绝对 不 能 信任 用 户 的 输入 , 用 户 会 轻易 地 在 数量 输入 框 中 随便 输入 一 个 不 是 数字 的 值 , 或 者 
忘记 输入 物品 的 名 称 。 我 们 还 要 考虑 到 ， 用户 可 能 会 输入 负数 。 在 Backbone 中 ,我 们 可 以 为 模型 
提供 valigate 方 法 ,验证 输入 的 信息 。 这 个 方法 的 参数 是 attrs 对 象 ， 是 在 模型 内 部 使 用 的 变 
量 , 包含 模型 的 所 有 属性 ， 以 便 我 们 直接 访问 各 个 属性 。 这 个 验证 方法 的 实现 如 下 列 代 码 清 单 所 
































示 。 我 们 检查 模型 是 否 有 和 名称， 数量 是 否 不 是 NaN ( 不 是 数字 )。NaN 不 是 数字 类 型 ， 


而 





且 和 自己 





不 相等 , 这 一 点 可 能 让 人 感到 困惑 , 所 以 我 们 要 使 用 JavaScript 原 生 的 isNaN 方 法 进行 测试 。 最 后 ， 





我 们 还 要 确保 数量 至 少 是 1。 
代码 清单 7.9 ”实现 验证 方法 


validate: function (attrs) { 
if (!attrs.name) { 
return 'Please enter the name of the item.'; 


if (typeof attrs.gquantity !== 'number' || isNaN(attrs.gquantity)) { 
return 'The quantity must be numeric!'; 


if (attreroantity 于 站 并 
return 'You should keep your groceries to Yourself. ': 





} 





为 了 便于 编辑 , 我 们 还 要 在 模型 中 添加 一 个 辅助 方法 。 这 个 辅助 方法 的 参数 是 一 个 数字 ,把 

















这 个 数字 和 现 有 数量 相 加 之 后 更 新 模型 。 我 们 要 验证 这 个 操作 , 确保 相 加 的 数 为 负 值 时 , 物品 的 
数量 不 会 小 于 1。 修 改 模型 时 默认 不 会 进行 验证 ,不 过 我 们 可 以 把 valiqate 选 项 的 值 设 为 true， 




















强制 验证 。 这 个 辅助 方法 如 下 列 代码 所 示 : 


addToOrder: function (gquantity) { 





this.set('gquantity', this.get('gquantity') + quantity, { validate: true }); 


} 





这 样 一 来 ， 不 管 把 数量 改 成 多 少 ， 都 会 触发 验证 。 如 果 验 证 失败 ， 模 型 中 的 数据 不 会 变化 ， 
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性 赋值 。 假 设 现在 模型 中 的 数量 是 6, 那么 执行 下 列 代码 会 
性 的 值 设 为 适当 的 错误 消息 : 


而 且 会 为 模型 的 validationError 属 
失败 ， 而 且 会 把 valigdationError 届 











model.addToOrder (-6); 
model .validationError; 
// <- 'You should keep your groceries to yourself.' 


现在 ， 模 型 能 拒绝 不 良 数据 了 。 下 面 我 们 要 更 新 视图 ， 让 前 面 编写 的 表单 起 作用 。 

3. 重 构 视图 逻辑 

修改 视图 时 ,我们 首先 要 添加 一 个 演 染 方法 ,让 这 个 方法 显示 错误 消息 ,并 且 记 住 用 户 输入 
的 物品 名 称 和 数量 ， 以 防 出 错时 这 两 个 信息 消失 。 为 了 明确 表明 这 个 方法 的 作用 , 我 们 把 这 个 方 


法 命名 为 updateViewWwithvalidation: 











updateViewWithValidation: function (validation) { 
this.viewModel = { 
shopping_list: this.collection.toJSON(), 
error: validation.error, 
name: validation.name, 
quantity: validation.quantity 
this.render(); 


} 


我 们 还 要 在 添加 按钮 上 绑 定 点 击 事件 的 监听 需 ， 为 此 ， 需 要 在 视 岁 的 events 对 象 中 再 添加 
一 个 属性 。 然 后 再 实现 aqdItem 事 件 句柄 即 可 。 


Click .add': 'addIitem' 
在 aqadqItem 事 件 句 柄 中 ， 首 先 要 获取 用 户 的 输入 ， 把 数量 解析 成 十 进 制 整数 : 


Var name = this.S(' .name').val():， 
Var quantity = parseInt (this.$('.gquantity').val(), 10); 


获得 用 户 输入 的 值 之 后 ,我 们 首先 要 确认 集合 中 是 否 有 同名 物品 。 如 果 有 的 话 ， 就 调用 
adqdToOrder 方 法 ， 验 证 输入 ， 然 后 更 新 模型 。 如 果 没 有 ， 则 创建 一 个 shoppingItem 模 型 新 实 
例 , 再 验证 。 如 果 验 证 通过 了 , 就 把 新 创建 的 物品 添加 到 集合 中 。 实现 这 些 操 作 的 代码 如 下 所 示 。 


ey Re < 7 
代码 清单 7.10 “验证 添加 到 购物 清单 中 的 物品 | 
Var model = this.collection.findWhere({ name: name }); 
if (model) { 
model.addToOrder (quantity); 















































} else { 
model = new ShoppingItem({ name: name, quantity: quantity }, { validate: 
true }); 


if (!model.validationError) { 
this.collection.add (model); 
} 
} 


因为 我 们 用 到 了 shoppingItem 类 ， 所 以 要 在 这 个 模块 的 顶部 添加 下 列 语句 : 
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var ShoppingItem = require('../models/shoppingItem.js'); 
如 果 验 证 失败 ， 就 要 重新 泻 染 视 图 ， 显 示 验 证 错误 消息 ， 让 用 户 知道 哪里 出 错 了 : 


if (!model.validationError) { 
return; 


} 





this.updateViewWithValidation({ 
name: name, 
quantity: quantity, 
error: model.validationError 


和 过 

如 果 验 证 通过 ， 那 么 集合 中 会 添加 一 个 新 物品 ， 或 者 现 有 的 物品 会 发 生变 化 。 这 两 个 操作 
应 该 通过 监听 集合 的 aada 和 change 事 件 完成 ， 因 此 要 在 视图 的 initialize 方 法 中 添加 下 列 两 
行 代码 : 

this.collection.on('add', this.updateView, this); 

this.collection.on('change', this.updateView, this); 


这 一 步 只 需 做 这 么 多 。 现在 , 我 们 能 向 清单 中 添加 新 物品 ,能 修改 现 有 物品 的 数量 ,也 能 删除 
物品 了 。 下 一 步 要 在 清单 中 的 每 个 物品 旁 添 加 一 个 编辑 按钮 ， 实 现行 内 编辑 ， 让 编辑 操作 更 直观 。 


7.4.4 “实现 行内 编辑 


本 节 要 实现 行内 编辑 物品 的 功能 。 每 个 物品 劳 会 显示 一 个 编辑 按钮 ， 用 户 点 击 这 个 按钮 后 ， 
可 以 修改 数量 , 然后 保存 记录 。 这 个 功能 本 身 很 简单 ,但 借 此 机 会 我 们 还 要 做 些 清理 工作 。 我 们 
要 把 内 容 渐 增 的 1ist 视 图 拆 分 成 三 个 视图 : 一 个 aadTtem 视 图 ， 负 责 处 理 输入 表单 ;一 个 
listItem 视 图 ， 负责 处 理 清单 中 的 单个 物品 ;原来 这 个 1ist 视 图 则 用 来 处 理 集合 的 增删 操作 。 

1. 视图 组 件 化 

首先 ， 我 们 把 1ist 模 板 分 成 两 个 文件 ， 使 用 两 个 不 同 的 视图 容器 : 一 个 用 于 显示 清单 ， 一 
个 用 于 显示 表单 。 我 们 把 之 前 那个 <aiv> 换 成 下 列 代码 : 


<ul class=']ist-view'></ul> 
<fieldset class='add-view'></fieldset> 


这 样 分 工 之 后 , 还 要 拆 分 Mustache 模 板 。 我 们 不 再 让 1i st 模板 做 所 有 事情 , 而 是 把 它 拆 分 成 
两 个 模板 。 稍 后 我 们 会 看 到 ,清单 本 身 不 需要 模板 ,只 有 表单 和 清单 中 的 单个 物品 需要 。 下 列 代 
人 码 是 views/templates/addItem.mu 模 板 的 内 容 。 表单 的 内 容 基 本 没 变 , 只 不 过 fieldqset 标 签 现 在 变 
成 视图 容器 了 ， 所 以 模板 中 不 需要 再 写 这 个 标签 了 。 


<legend>Add Groceries</legend> 

<label>Name</label> 

<input class='name' value='{{name}}' /> 
<label>Quantity</label> 

<input class='gquantity' type='number' value='{{quantity}}' /> 
<button class='add'>Add</button> 
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{{#error}} 
<p>{{error}}</p> 
{{/error}} 


list 视 图 自身 不 再 需要 模板 了 , 这 是 因为 我 们 只 需要 在 1ist 视 图 中 把 el 属性 的 值 设 为 <u1> 
元 素 ， 稍 后 你 就 会 看 到 。 清 单 中 的 单个 物品 会 在 单独 的 视图 中 泻 染 ， 而 且 要 使 用 一 个 视图 模板 。 
我 们 要 在 1istItem 视 图 模型 中 设 定 一 个 属性 ， 记 录 是 否 正在 编辑 物品 。 然 后 在 视图 模板 中 检查 
这 个 属性 的 值 ， 判 断 是 泻 染 标 签 和 操作 按钮 还 是 行内 编辑 表单 。1istItem 模 板 如 下 列 代码 清单 
所 示 ， 这 个 模板 保存 在 views/templates/listItem.mu 文 件 中 。 


代码 清单 7.11 显示 单个 物品 的 模板 
{{^editing}} 
<span>{{quantity}}x {{name}}</span> 
<button class='edit'>Edit</button> 
<button class='remove'>x</button> 
{{/editing}} 
{{#editing}} 
<span>{{name}}</span> 
<input class='edit-quantity' value='{{quantity}}' type='number' /> 
<button class='cancel'>Cancel</button> 
<button class='save'>Save</button> 
{{/editing}} 
{{#error}} 
<span>{{error}}</span> 
{{/error}} 


我 们 还 是 要 在 1ist 视 图 中 创建 集合 ， 不 过 要 把 这 个 集合 传 给 aaaItem 视 图 。 这 样 就 把 两 个 
视图 紧密 看 合 在 一 起 了 ， 因 为 a94Item 视 图 需要 创建 集合 的 1ist 视 图 一 一 这 不 符合 模块 化 思想 。 
现在 ,应 用 的 入 口 文 件 app.js 的 内 容 如 下 所 示 ， 而 且 各 个 组 件 的 内 容 都 变 得 更 少 了 。 下 一 步 我 们 
会 解决 这 个 耦合 问题 。 


Var Backbone = require('backbone'); 
Backbone.s$ = require('jquery'); 





































































































var ListView require('./views/list.js'); 


Var listView = new ListView(); cd 


Var AddItemView require('./views/addIitem.js'); 
Var addItemView new AddItemView({ collection: listView.collection }); 


下 面 我 们 要 创建 aadItem 视 图 。 

2. 模块 化 的 “添加 到 购物 车 ”视图 

adgdItem 视 图 的 内 容 和 开始 组 件 化 之 前 1ist 视 图 的 内 容 差 不 多 ,下列 代码 清单 展示 了 这 个 视 
图 是 如 何 初始 化 的 , 还 展示 了 如 何 使 用 .aqa-view 选 择 符 找到 <fieldqset> 元 素 。 我 们 会 把 这 
元 素 当成 视图 的 容器 使 用 。 


代码 清单 7.12 ”初始 化 视图 


Var fs = require('fs'); 



































> 
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var base = require('./base.js'); 
Var template = fs.readFileSync( 
_ dirname + '/templates/addIitem.mu', { encoding: 'utf8' } 
); 
var ShoppingItem = require('../models/shoppingItem.js'); 


module.exports = base.extendl({ 
el: '.add-view', 
template: template, 
initialize: function () { 
this.updateView(); 
Rs 
updateView: function (vm) { 
this.viewModel = vm || {}; 
this.render(); 
} 
}) 3 


可 以 看 出 , 这 个 视图 只 负责 把 模型 添加 到 集合 中 , 我 们 还 要 在 这 个 视图 中 编写 一 个 处 理 添加 
按钮 点 击 事件 的 句柄 ， 如 下 列 代码 清单 所 示 。 这 个 句柄 几乎 和 之 前 的 aaaItem 方 法 一 模 一 样 ， 唯 
一 的 区 别 是 ， 现 在 每 次 执行 aaaTtem 事 件 句柄 会 更 新 视图 。 
代码 清单 7.13 ”更 新 视图 


events: { 
'click .add': 'addItem' 

















}, 


addItem: function () { 
Var name = this.$('.name') .val (); 
var quantity = parseInt (this.$('.gquantity') .val(), 10); 


var model = this.collection.findWhere({ name: name }); 
if (model) { 
model.addToOrder (quantity); 
} else { 
model = new ShoppingItem( 
{ name: name, quantity: quantity }, 
{ validate: true } 
); 


if (!model.validationError) { 
this.collection.add (model); 


} 


if (!model.validationError) { 
this.updateView(); 
return; 
} 
this.updateView!({ 
name: name, 
quantity: quantity, 
error: model.validationError 


})s 
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adqdaItenm 视 图 只 需要 做 一 件 事 一 一 添加 物品 ， 因 此 我 们 只 需 写 这 么 多 代码 。 下 面 我 们 来 编写 
listItem 视 图 。 

3. 编写 泻 染 清 单 中 单个 物品 的 视图 

listItem 视 图 负责 演 染 修改 后 的 模型 ， 还 要 处 理 编辑 物品 和 删除 物品 的 操作 。 下 面 我 们 从 
头 开 始 编 写 这 个 视图 。 首 先 ， 按照 惯例 ,我 们 要 读 取 模板 文件 ,然后 扩展 基 视 图 。tagName 属 性 
表明 ， 我 们 要 把 这 个 视图 泻 染 的 结果 放 到 <1i> 元 素 中 。 在 这 个 视图 中 ， 先 写 入 下 列 代码 : 

Var fs = require('fs'); 

Var base = require('./base.js'); 


Var template = fs.readFileSync( 
_ dirname + '/templates/listItem.mu', { encoding: 'utf8' } 


); 




















module.exports = base.extendl({ 
tagName: '1i', 
template: template 

}3 


稍 后 重 构 1ist 视 图 之 后 我 们 会 看 到 ， 初 始 化 1istItem 视 图 时 会 设 定 model 和 collection 
属性 。 只 要 模型 有 变化 ， 我 们 就 要 重新 泻 染 这 个 视图 。 而 且 ， 初 始 化 这 个 视图 时 也 要 自行 泻 染 。 
为 了 防止 行内 编辑 时 验证 出 错 ， 我 们 还 要 在 视图 模型 中 记录 错误 。1istItem 视 图 的 初始 化 方法 
如 下 所 示 : 

initialize: function () { 


this.model.on('change', this.updateView, this); 
this.updateView(); 



































} 
updateView: function () { 

this.viewModel = this.model.toJSON(); 
this.viewModel.error = this.model.validationError; 
this.render(); 


} 


现在 , 编写 处 理 删 除 操作 的 事件 句柄 容易 多 了 。 如 下 列 代码 所 示 , 我 们 只 需 把 模型 从 集合 中 
删除 即 可 ， 不 过 模型 和 集合 仍 需 在 视图 的 属性 中 设 定 。 


events: { 























'click .remove': 'removelItem' 
} 
removeItem: function (e) { 

this.collection.remove (this.model); 


} 

接 下 来 我 们 要 编写 处 理 编辑 和 取消 编辑 的 方法 。 这 两 个 方法 的 内 容 类 似 , 一 个 是 进入 编辑 模 
式 , 一 个 是 退出 编辑 模式 ,它们 所 做 的 就 是 修改 editing 属 性 ,其 他 的 则 交 给 监听 模型 变动 的 事 
件 监听 器 处 理 。 进 入 和 退出 编辑 模式 时 ， 我 们 还 要 清空 validationError 属 性 的 值 。 这 些 事 件 
句柄 如 下 列 代码 清单 所 示 。 
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代码 清单 7.14 ”添加 处 理 编辑 和 取消 编辑 的 方法 


events: { 


"liek. vedit": "editItenm';y 
'click .cancel': 'cancelEdit', 
'click .remove': 'removeltem' 


二 
removeItem: function (e) { 
this.collection.remove (this.model); 


editItem: function (e) { 
this.model.validationError = null; 
this.model.set('editing', true); 


cancelFEdit: function (e) { 
this.model.validationError = null; 
this.model.set('editing', false); 








} 


listItem 视 图 还 有 最 后 一 个 任务 : 保存 编辑 后 的 结果 。 我 们 需要 把 相关 操作 绑 定 到 保存 按 
钮 的 点 击 事件 上 ， 在 事件 句柄 中 解析 输入 ,然后 更 新 数量 。 只 有 验证 成 功 , 我 们 才能 退出 编辑 模 
式 。 注 意 ， 为 了 行文 简洁 ， 我 没有 重复 前 面 编写 的 事件 句柄 : 

events: { 


'click .save': 'saveItem' 
3 
saveItem: function (e) { 
var quantity = parseInt (this.$('.edit-gquantity').val(), 10); 
this.model.set('guantity', quantity, { validate: true }); 
this.model.set('editing', this.model.validationError); 
起 
的 训 


listItem 视 图 没有 其 他 职责 ， 但 1ist 视 图 应 该 负责 把 这 个 局 部 视图 添加 到 UI 中 ， 或 从 UI 
中 删除 。 我 所 说 的 “局 部 视图 ”"， 是 指 只 表示 部 分 内 容 的 视图 。1istItem 视 图 只 表示 组 成 清单 的 
单个 物品 , 而 不 是 整个 清单 。 在 1ist 视 图 中 , 需要 使 用 多 少 个 1istItem 视 图 , 就 要 创建 多 少 个 。 

4. 重 构 1ist 视 图 

之 前 ， 每 次 增 姓 物品 后 都 要 重新 泻 染 1ist 视 图 。 而 现在 ，1ist 视 图 只 需要 分 别 演 染 各 个 物 
品 ， 然 后 再 把 泻 染 结果 添加 到 DOM 中 ， 或 者 从 DOM 中 删除 现 有 的 物品 。 这 样 做 不 仅 比 重新 泻 染 
整个 视图 的 速度 快 ， 而 且 还 更 模块 化 。1ist 视 图 只 需 管理 整体 操作 ， 即 增删 物品 。 各 个 物品 会 
自行 维护 自己 的 状态 ， 更 新 各 自在 UI 中 的 呈现 。 

因此 ，1list 视 图 无 需 再 使 用 view .render 方 法 ,而 是 直接 处 理 DOM 就 行 了 。 不 过 ， 如 下 列 
代码 清单 所 示 ， 之 前 1ist 视 图 中 的 部 分 内 容 要 保留 ， 例 如 硬 编码 的 集合 数据 ， 依 然 扩 展 自 基 视 
图 ， 还 要 设 定 sl1 属 性。 注意 ， 我 们 修改 了 视图 容器 ， 以 与 你 的 <ul1> 元 素 相 匹配 。 
代码 清单 7.15 ”之 前 的 1ist 视 图 保留 下 来 的 内 容 


Var base = require('./base.js'); 
Var ShoppingList = require('../collections/shoppingList.js'); 
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module.exports = base.extendq({ 
全 本 和 人 ESW 
collection: new ShoppingList([ 
{ name: 'Banana', quantity: 3 }, 
{ name: 'Strawberry', quantity: 8 }, 
{ name: 'Almond', quantity: 34 }, 
{ name: 'Chocolate Bar', quantity: 1 } 
] ) 
}); 


现在 我 们 不 想 在 每 次 修改 物品 后 都 重新 泻 染 整个 视图 了 ， 所 以 要 使 用 两 个 新 方法 addItem 和 
removeItem 来 处 理 DOM。 每 次 修改 集合 时 , 我 们 都 要 执行 这 两 个 方法 , 确保 UI 显示 的 内 容 始 终 
是 最 新 的 。 我 们 还 可 以 使 用 aaaItem 方 法 泻 染 一 开始 就 在 集合 中 的 物品 ， 具 体 方法 是 ， 初 始 化 
ist 视 图 时 在 集合 中 的 每 个 模型 上 调用 addItem 方 法 。initialize 方 法 如 下 列 代码 片段 所 示 。 
稍 后 我 会 说 明 partials 变 量 的 作用 。 
initialize: function () { 

this.partials = {}; 

this.collection.on('add', this.addItem, this); 

this.collection.on('remove', this.removelItem, this); 


this.collection.models.forEach (this.addIitem, this); 


} 
在 编写 addItem 方 法 之 前 ， 我 要 提示 一 下 ， 这 个 方法 需要 require 一 下 listItem 视 图 ， 为 
集合 中 的 各 个 模型 创建 局 部 视图 。 因 此 ， 我 们 要 在 1ist 视 图 所 在 模块 的 顶部 加 入 : 
Var ListIitemView = require('./listItem.js'); 
现在 可 以 实现 addItem 方 法 了 。 这 个 方法 的 参数 是 一 个 模型 。 在 方法 中 , 我们 首先 要 创建 一 
个 ListItemView 实 例 ， 然后 把 演 染 结果 (一 个 <1i> 元 素 ) 附加 到 this .sel 中 (就 是 那个 <ul> 
元 素 ). 为 了 便于 找到 要 从 清单 中 删除 的 物品 ,我 们 在 partials 变 量 中 记录 了 各 个 物品 .Backbone 
的 模型 有 个 唯一 的 ID 属性 ， 可 以 通过 modael.cia 获 取 ， 所 以 我 们 可 以 使 用 这 个 ID 值 作为 
partials 对 象 的 键 。adqdqItenm 方 法 的 定义 如 下 所 示 : 
addItem: function (model) { 
Var item = new ListItemView(t{ 
model: model, 
collection: this.collection 
人 
this.s$el.append (item.el); 


this.partials[model.cid] = item; 


} 

这 样 一 来 ， 删 除 元 素 时 只 需 通过 modqel . cid 键 获取 partials 对 象 中 相应 的 局 部 视图 ， 然 后 
将 其 删除 即 可 。 随 后 ， 我 们 还 要 确保 从 partials 对 象 中 也 删除 了 这 个 元 素 。 

removeItem: function (model) { 


var item = this.partials[model.cid]; 
item.s$el.remove(); 





























EA 
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delete this.partials[model.cid]; 
} 


重 构 的 过 程 有 些 惊险 , 不 过 现在 可 以 松口 气 了 。 我 们 重 构 的 效果 显著 ,让 多 个 视图 处 理 同 一 
个 集合 ， 而 且 各 个 视图 都 更 自 成 一 体 。adaItem 视 图 只 负责 把 物品 添加 到 集合 中 ; 1ist 视 图 只 
负责 创建 1istItem 视 图 , 或 把 1istItem 视 图 从 DOM 中 删除 ; 而 1istItem 视 图 只 关注 对 单个 模 
型 的 修改 。 

现在 可 以 查看 一 下 本 书 的 配套 源码 , 确保 理解 了 这 一 步 所 做 的 全 部 改动 , 看 一 下 这 个 购物 清 
单 应 用 现在 处 于 什么 状态 了 。 这 一 步 对 应 的 代码 在 ch07/09_item-editing 文 件 夹 中 。 

这 一 步 我 们 很 好 地 分 离 了 关注 点 ,不 过 还 可 以 做 得 更 好 。 我 们 会 在 最 后 一 步 来 看 应 该 怎么 做 。 


7.4.5 服务 层 和 视图 路 由 


最 后 一 步 , 我 们 要 对 应 用 的 结构 作 两 处 调整 ,需要 在 应 用 中 添加 一 个 简单 的 服务 层 , 还 要 引 
人 视图 路 由 。 我 们 要 通过 这 个 只 在 一 个 地 方 提供 购物 清单 集合 的 服务 ， 赋 予 视图 请 求 这 个 服务 、 
获取 购物 清单 中 的 数据 的 能 力 。 这 样 做 极 大 程度 上 解 厢 了 视图 , 而 之 前 我 们 生成 的 这 些 数据 要 在 
多 个 视图 中 共享 。 

注意 , 现在 我 们 仍然 是 在 硬 编码 一 个 物品 数组 , 不 过 我 们 可 以 使 用 Ajax 请 求 获取 其 中 的 数据 ， 
也 可 以 通过 Promise 对 象 获取 (参见 第 6 章 )。 目 前 ， 这 个 服务 的 代码 如 下 列 代码 清单 所 示 。 这 个 
文件 应 该 放 在 services 目 录 中 。 


代码 清单 7.16” 硬 编 码 一 个 物品 数组 


var ShoppingList = require('../collections/shoppingList.js'); 



























































var items = [ 

{ name: 'Banana', quantity: 3 }, 
name: 'Strawberry', quantity: 8 }, 
name: 'Almond', quantity: 34 }, 
name: 'Chocolate Bar', quantity: 1 } 


一 一 一 


] ; 
module.exports = { 
collection: new ShoppingList (items) 


}; 


创建 好 这 个 服务 后 ，addaItem 和 1ist 视 图 都 应 该 require 这 个 服务 ， 然 后 把 shopping 
Service.collection 赋 值 给 collection 属 性 。 这 样 一 来 ， 我 们 就 无 需 像 之 前 那样 ， 初 始 化 
List 视 图 时 创建 一 个 集合 ， 然 后 传 来 传 去 了 。 

下 面 再 介绍 路 由 ， 结 束 本 次 购物 清单 之 旅 。 

购物 清单 的 路 由 

这 一 步 还 要 实现 路 由 。 为 了 让 这 个 过 程 显 得 有 趣 一 些 , 我 们 会 把 aadaItem 视 图 对 应 到 别 的 路 
由 上 。 下 列 代码 清单 应 该 放 在 单独 的 模块 中 ， 保 存在 routers/viewRouterjs 文 件 中 。 用 户 访问 这 个 
应 用 时 ，zrooet 动 作 会 把 他 们 重 定向 到 其 他 地 方 。 这 个 应 用 不 会 在 URL 中 使 用 哈 希 符号 。 
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代码 清单 7.17 ”把 aaaIitem 视 图 对 应 到 别 的 路 由 上 


Var Backbone = require('backbone'); 
Var ListView = require('../views/list.js'); 
Var AddItemView = require('../views/addIitem.js'); 
module.exports = Backbone.Router.extend(t{ 
routes: { 
GOES 
'items': 'listItems', 
'items/add': 'addItem' 
} 
root: function () { 
this.navigate('items', { trigger: true }); 
} 
listItems: function () { 
new ListView(); 

} 
addItem: function () { 
new AddItemView(); 

} 
上 他 


7.3.4 节 首次 介绍 Backbone 路 由 器 时 我 提 到 过 ， 我 们 要 打开 appjs 文 件 ， 把 其 中 的 内 容 蔡 换 成 
下 列 代码 清单 中 的 代码 ， 这 样 视图 路 由 才能 起 作用 。 我 们 没有 限制 用 户 首先 应 该 看 到 哪个 视图 ， 
他 们 访问 哪个 URL， 就 会 显示 那个 URL 相 应 的 视图 。 
代码 清单 7.18 ”激活 视图 路 由 器 


Var Backbone = require('backbone'); 
Var $ = require('jquery'); 





Backbone.$ = $; 


Var ViewRouter = require('./routers/viewRouter.js'); 
new ViewRouter(); 


s(function () { 
Backbone.history.start(); 


}); 

添加 视图 路 由 后 ,我 们 还 要 修改 视图 和 模板 。 首 先 , 我 们 要 撤销 上 一 步 的 改动 ， 只 使 用 一 个 
视图 容器 : 

<div class='view'></div> 

其 次 ,在 adaItem 视 图 和 1ist 视 图 中 要 把 el 属性 的 值 设 为 ' .view' 。 我 们 还 要 适当 修改 视 
图 模板 。 例 如 ， 在 adaaItem 模 板 中 添加 一 个 取消 按钮 ， 用 于 返回 1ist 视 图 。 取 消 按钮 的 代码 如 
下 所 示 : 

<a href='#items' class='cancel'>Cancel</a> 


最 后 ， 要 为 1ist 视 图 提供 一 个 视图 模板 ， 不 过 这 个 模板 的 内 容 很 少 。 在 这 个 模板 中 要 有 一 
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个 <ul> 元 素 ， 用 来 显示 清单 ， 还 要 有 一 个 链接 ， 指 向 addItem 视 图 。 这 个 模板 保存 在 views/ 
templates/list.mu 文 件 中 ， 内 容 如 下 列 代码 片段 所 示 : 


<ul class='items'></ul> 
<a href='#items/add'>Add Item</a> 


1ist 视 图 应 该 在 初始 化 时 泻 染 这 个 模板 ， 并 设 定 显示 清单 的 元 素 


this.render(); 
this.s$list = this.$('.items'); 


因为 现在 只 有 一 个 视图 容器 ， 所 以 把 物品 添加 到 清单 中 时 ， 不 能 附加 到 sel1 元 素 了 ， 而 要 附 
加 到 s1ist 元 素 : 





























this.s$slist.append(item.el); 


这 个 应 用 的 开发 到 此 结束 ! 请 一 定 要 看 一 下 本 书 配套 源码 中 的 代码 ,其 中 最 后 一 步 的 代码 在 
ch07/10_the-road-show 文 件 夹 中 , 包含 目前 为 止 编 写 的 全 部 代码 。 接 下 来 我 们 要 学 习 Rendr， 使 用 
这 个 工具 能 在 服务 器 端 演 染 Backbone 的 客户 端 视 图 。 开 发 Node.js 应 用 时 , 这 个 工具 能 提升 用 户 可 
感知 的 性 能 。 





























7.5” Backbone 和 Rendr: 服务 器 和 客户 端 共 享 泻 染 





Rendr 会 在 服务 央 端 泻 染 Backbone 应 用 ， 从 而 提升 可 感知 的 性 能 。 使 用 这 个 工具 ， 可 以 实现 

在 Backbone 开 始 接手 执行 JavaScript 代 码 之 前 ， 浏 览 器 就 能 显示 泻 染 好 的 页 面 。 首 次 加 载 页 面 时 ， 
用 户 就 能 立即 看 到 内 容 。 在 此 之 后 ，Backbone 会 接手 在 客户 端 处 理 路 由 。 首 次 加 载 的 效果 非常 重 
要 。 较 之 等 待 Backbone 读 取 数 据 、 填 充 视 图 再 演 染 模板 , 在 用 户 没 看 到 任何 内 容 之 前 先 在 服务 器 中 
渲染 应 用 更 好 。 因 此 ， 开 发 Web 应 用 时 ,在 服务 器 端 泻 染 仍然 十 分 重要 。 下 面 简 略 介 绍 一 下 Rendr。 























7.5.1 Rendr 简 介 


Rendr 对 应 用 的 结构 有 约定 , 要 求 使 用 特定 的 方式 命名 模块 ,还 要 把 模块 放 在 特定 的 目录 中 。 
Rendr 对 使 用 什么 类 型 的 模板 以 及 应 用 应 该 如 何 获取 数据 也 有 要 求 。 默认 情 况 下 ，Rendr 希 望 我 们 
使 用 RESTAPI 获 取 应 用 的 数据 。 我 们 会 在 第 9 章 探讨 REST API 设 计 。 

Rendr 运 行 在 Node.js 平 台中 ， 是 HTTP 堆 栈 的 中 间 件 。 它 会 截获 请 求 ， 在 服务 器 端 演 染 视图 ， 
然后 把 演 A a 我 们 可 以 定义 控制 器 ， 分 离 关 注 点 。 控 制 器 的 作用 是 获 
取 数据 、 演 染 视 图 或 进行 重 定向 。 使 用 Rendr 后 ， 我 们 无 需 在 视图 中 引用 模板 ， 因 为 Rendr 有 一 套 
很 好 的 命名 策略 ， 使 我 们 不 用 再 手动 管理 依赖 ， 而 是 交 给 Rendr 引 擎 管理 基本 上 就 可 以 了 。 看 过 
7.5.2 节 的 代码 后 ， 你 会 对 这 种 处 理 方式 有 更 清晰 的 理解 。 

1. 尺 短 寸 长 

Rendr 并 非 完美 无 缺 。 写 作 本 书 时 ，Rendr ( v0.5 ) 有 些 “ 怪 异 ” 的 设计 方式 ， 因 此 我 决定 不 
从 本 章 一 开始 就 使 用 Rendr， 以 免 示 例 变 得 复杂 。 例 如 ， 为 了 在 浏览 器 中 使 用 CommonJS 模 块 ， 
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Rendr 会 使 用 Browserify， 但 编译 时 却 用 了 以 下 三 种 特殊 的 方式 。 

(1) jQuery 要 使 用 browserify-shim 调 整 。 这 会 导致 问题 ， 因 为 Rendr 在 服务 器 端 使 用 的 是 
特殊 的 jQuery 版 本 , 这 可 能 会 导致 版 本 差异 。 如 果 试 图 使 用 从 npm 中 安装 的 CommonJS 版 本 , Rendr 
就 无 法 正常 运行 。 

(2) 使 用 require 导 入 库 时 ， 有 一 部 分 库 需 要 创建 别名 才能 正确 导入 。 这 是 个 问题 ， 因 为 这 
会 导致 下 一 个 缺陷 。 

(3) 在 Rendr 中 不 能 使 用 brfs 转 换 方式 。 

这 里 不 深入 介绍 Rendr 的 更 重要 的 原因 是 ，Rendr 适 用 范围 不 广 。 如 果 你 使 用 Node.js 之 外 的 其 
他 服务 器 端 语言 ， 下 面 我 要 教 你 的 很 多 概念 都 用 不 上 。 搬 开 这 些 问 题 ， 在 Backbone 应 用 中 使 用 
Rendr 提 供 的 传统 MVC 功 能 也 确 有 其 价值 。 服 务 器 端 语 言 有 很 多 传统 的 MVC 框 架 ，Backbone 和 
Rendr 结 合 在 一 起 能 实现 很 多 类 似 这 些 框 架 提供 的 功能 ， 而 且 探讨 客户 端 JavaScript 编 程 时 很 少 会 
教 你 这 些 知识 。 共 享 尝 染 这 个 特性 显著 提升 了 Rendr 的 吸引 力 。 选 择 技术 栈 时 ， 多 数 时 候 我 们 都 
要 作出 妥协 。 这 里 要 提 一 下 Facebook 开 发 的 React, 这 个 库 很 不 错 , 在 服务 器 端 和 客户 端 都 能 演 染 ， 
而 且 不 需要 额外 的 工具 支持 。 

2. 开始 使 用 

我 会 使 用 AirBnB ( 开发 Rendr 的 公司 ) 用 来 说 明 Rendr 工 作 方式 的 一 个 示例 ， 并 稍 作 调整 ， 展 
示 Rendr 的 用 法 。 这 些 代 码 在 本 书 配 套 源 码 的 ch07/11_entourage 文 件 夹 中 。 

我 们 首先 来 说 说 模板 。Rendr 建 议 使 用 Mustache 的 超 集 ，Handlebars。Handlebars 提 供 了 很 多 
额外 功能 ， 主 要 使 用 辅助 方法 的 形式 实现 ,例如 if。Rendr 和 希望 你 编译 Handlebars 模 板 ， 并 打包 得 
到 的 结果 ， 将 其 保存 到 app/templates/compiledTemplates.js 文 件 中 。 为 此 ， 我 们 先 来 安装 处 理 
Handlebars 的 Grunt 插 件 : 

































































npm install --save-dev grunt-contripb-handlebars 


然后 ,我 们 需要 把 下 列 代码 清单 中 的 代码 写 入 Gruntfile.js 文 件 ， 配 置 这 个 处 理 Handlebars 的 
Grunt 插 件 。 Rendr 要 求 , 必须 在 handlebars :compile 任 务 目标 中 设 定 options 选 项 , 而 日 Rendr 
期 望 模板 使 用 特定 的 方式 命名 。 


代码 清单 7.19 配置 Handlebars 搬 件 
handlebars: { 
compile: { 
options;: { 
namespace: false, 
commonjs: true, 
processName: function (filename) { 
return filename.replace('app/templates/', '').replace('.hbs', ''); 
} 
} 
src: 'app/templates/**/*.hbs', 
dest: 'app/templates/compiledTemplates.js' 
lj 
} 
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现在 ，Browserify 也 要 按照 Rendr 的 要 求 配置 。 我 们 不 能 从 npm 中 安装 jQuery， 而 要 使 用 调整 
后 的 版 本 。 我 们 还 要 创建 别名 , 这 样 Rendr 才 能 使 用 Handlebars 适 配器 rendr-handlebars。 最 后 ， 
我 们 还 要 把 源 文件 和 目标 文件 对 应 起 来 ， 让 Rendr 访 问 应 用 中 的 各 个 模块 。 让 Browserify 和 Rendr 
良好 协作 的 配置 如 下 列 代 码 清单 所 示 。 


代码 清单 7.20 配置 Browserify， 以 便 在 Rendr 中 使 用 


browserify: { 
options: { 
debug: true, 











alias: ['node modules/rendr-handlebars/index.js:rendr-handlebars'], 
aliasMappings: [{ 

cwd: 'app/', 

SIE [i 


dest: 'app/' 
jy 
shim: { 
jauery: { 
path: 'assets/vendor/jquery-1.9.1.min.js', 
exports: 'S$'" 
} 
} 
es 
app: { 
ST :| rapB/ Tey 
dest: 'public/bundle.js' 
} 
} 


配置 构建 任务 的 工作 到 此 结束 。 上 述 配 置 可 能 并 不 完美 , 但 配置 好 之 后 就 不 用 管 了 。 下 面 我 
们 来 开发 示例 应 用 ， 学 习 如 何 使 用 Rendr。 


7.5.2 ”理解 Rendr 的 样板 代码 


开发 Rendr 应 用 的 第 一 步 是 创建 Node 程 序 的 入 口 点 。 我 们 要 把 这 个 文件 命名 为 appjs， 放 在 应 
用 的 根 目 录 中 。 前 面 我 说 过 ，Rendr 是 HTTP 堆 栈 的 中 间 件 ， 可 以 插入 Express。 

1. Rendr 是 Express 的 中 间 件 

Express 是 个 流行 的 Node.js 框 架 ， 建 立 在 原生 的 http 模 块 之 上 ， 提 供 了 很 多 额外 的 功能 ， 其 
中 包括 实现 路 由 等 功能 。 本 节 介 绍 的 大 多 数 功能 都 是 由 Rendr 而 不 是 Express 提 供 的 。 不 过 ，Rendr 
增强 了 Express 的 功能 ， 让 它 用 起 来 更 顺手 。 


npm install express --save 


下 列 代 码 使 用 express 包 在 Node 中 架设 了 一 个 HTTP 服 务 器 。 调 用 express () 方 法 会 创建 一 
个 新 的 Express 应 用 实例 ， 然 后 我 们 可 以 使 用 app.use 把 中 间 件 添加 到 这 个 实例 中 。 调 用 
app.1isten(port) 方 法 后 ， 这 个 应 用 会 一 直 运 行 ， 并 处 理 选 定 端口 中 进入 的 HTTP 请 求 。 根 据 
最 佳 实践 ， 应 用 监听 的 端口 应 该 使 用 环境 变量 配置 ， 而 且 要 有 合理 的 默认 值 。 
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var express = require('express'); 
Var app = express(); 
Var port = process.env.PORT || 3000; 


app.use (express.static(_ dirname + '/public')); 

app.use (express.bodyParser ()); 

app.listen(port, function () { 
console.log('listening on port %s', port); 

1 


static 中 间 件 告诉 Express 把 指定 目录 中 的 所 有 文件 当成 静态 资源 。 如 果 用 户 请 求 
http://localhost:3000/js/foo.js， 而 且 public/js/foo.js 文 件 存在 ，Express 就 会 在 响应 中 发 回 这 个 文件 的 
内 容 。bodyParser 中 间 件 是 个 实用 的 工具 ， 它 会 使 用 JSON 或 表单 数据 格式 解析 请 求 主体 。 

下 列 代码 清单 是 这 个 示例 的 Rendr 配 置 。 稍 后 我 们 会 看 到 ， 配 置 好 之 后 ， 其 他 事情 都 交 给 这 
个 中 间 件 处 理 。dqataadqapterCconfig 告 诉 Rendr 查 询 哪个 API。 这 正 是 Rendr 的 强大 之 处 ， 不 
在 客户 端 还 是 服务 器 端 ， 只 要 有 获取 数据 的 需要 ， 就 会 查询 指定 的 API。 


代码 清单 7.21 配置 Rendr 


Var rendr = require('rendr'); 
Var rendrServer = Trendqr.createServer ({ 
dataAdapterConfig: { 
default: { 
host: 'api.github.com', 
protocol: 'https' 
} 
} 
和 




















a 








app.use (rendrServer); 


2. 设置 Rendr 

Rendr 提 供 了 很 多 基 对 象 ， 开 发 应 用 时 我 们 要 扩展 这 些 对 象 。 我 们 应 该 在 app/app.js 文 件 中 扩 
展 BaseApp 对 象 (扩展 自 BaseView 对 象 )， 以 创建 Rendr 应 用 。 我 们 可 以 向 这 个 文件 添加 初始 化 
代码 ， 这些 代 码 在 客户 端 和 服务 器 中 都 会 运行 ,用 于 维护 应 用 的 全 局 状态 。 下 列 代码 能 满足 我 们 
的 需求 : 


Var BaseApp = require('rendr/shared/app'); 


module.exports = BaseApp.extendl(t{ 
和 


我 们 还 要 创建 一 个 路 由 器 模块 ,在 路 由 变化 时 记录 页 面 的 浏览 数 。 不 过 ， 目 前 我 们 只 需 创 建 
一 个 基 路 由 器 实例 。 路 由 需 模 块 应 该 保存 在 app/mrouterjs 文 件 中 ， 内 容 如 下 所 示 : 


Var BaseClientRouter = require('rendr/client/router'); 





Var Router = module.exports = function Router (options) { 
BaseClientRouter.call(this，options) ; 


二 
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Router.prototype = Object.create(BaseClientRouter.prototype); 
Router.prototype.constructor = BaseClientRouter; 


下 面 我 们 来 看 一 下 实现 这 个 Rendr 应 用 的 具体 功能 。 


7.5.3 一 个 简单 的 Rendr 应 用 


我 们 按照 Rendr 的 要 求 配置 了 Grunt 和 Express, 现在 要 开发 应 用 了 ,为 了 让 这 个 示例 易于 理解 ， 
我 会 按照 Rendr 何 服 响应 的 逻辑 顺序 编写 代码 。 此 外 ， 为 了 让 这 个 示例 自 成 一 体 且 不 失 趣味 ,我 
们 要 创建 三 个 不 同 的 视图 : 

(1) 首页 ， 应 用 的 欢迎 页 面 ; 

(2) 用 户 列表 页 面 ， 列 出 多 个 GitHub 用 户 ; 

(3) 单个 用 户 页 面 ， 显 示 具 体 用 户 的 详细 信息 。 

这 些 视图 和 路 由 是 一 一 对 应 的 首页 视图 对 应 应 用 的 根 地 址 /; 用 户 列 表 的 地 址 是 /users; 用 
户 详 细 信 息 视 图 对 应 的 路 由 是 /users/:login， 其 中 :login 是 用 户 的 GitHub 用 户 名 (我 的 用 户 名 是 
bevacqua )。 这 些 视图 都 在 控制 器 中 泻 染 。 

图 7-5 显 示 的 是 用 户 列 表 页 面 的 最 终 效 果 。 


IGCC Entourage x . 下 


所 已 jusers 过 加 OO 三 
GitHub Browser 




















. 
= railciiten 


图 7-5 ”使 用 Rendr 列 出 一 些 GitHub 用 户 
我 们 先 从 路 由 开始 ， 然 后 再 学 习 如 何 使 用 控制 右 。 
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1. 路 由 和 控制 器 
下 列 代码 把 路 由 和 控制 器 动作 对 应 起 来 。 控 制 器 动作 的 格式 是 : 控制 器 名 后 跟 哈 希 符 号 ， 然 
后 再 跟 动 作 名 。 这 个 模块 保存 在 app/routes.js 文 件 中 。 


module.exports = function (match) { 








matel(. 'home#index'); 
match('users’' 7 'users#index'); 
match('users/:login', 'users#show'); 


}; 

控制 器 会 获取 泻 染 视图 所 需 的 任何 数据 。 路 由 中 设置 的 每 个 动作 都 要 定义 。 下面 编写 这 两 个 
控制 器 。 按 照 约定 ， 控 制 占 应 该 保存 在 app/controllers/{ {name}}_controllerjs 文 件 中 。 下 列 代 码 片 
段 是 Home 控 制 器 , 应 该 保存 在 app/controllers/home controllerjs 文 件 中 。 这 个 模块 应 该 开放 indqex 
函数 ， 因 为 路 由 中 设 定 了 inaqex 动 作 。 这 个 函数 的 参数 是 一 个 对 象 和 一 个 回调 ， 它 被 调用 时 会 泻 
桨 视图 : 




















module.exports = { 
index: function (params, callback) { 
callback(); 
} 
> 


user_controller .js 模块 有 些 不 同 ， 除 了 index 动 作 之 外 ， 它 还 有 show 动 作 。 在 这 两 个 
动作 中 ， 我们 都 要 使 用 this .app.fetch 方 法 ,获取 模型 数据 ,而 且 获 取 结 束 后 要 调用 回调 ， 如 
下 列 代码 清单 所 示 。 


代码 清单 7.22 ”获取 模型 数据 
module.exports = { 
index: function (params, callback) { 
Var spec = { 
GOLLection 
collection: 'Users', 
params: params 
. 
}; 
this.app.fetch(spec, function (err, result) { 
callback (err, result); 
局 及 








} 
show: function (params, callback) { 
Var spec = { 
model: { 
model: 'User', 
params: params 
} 
repos: { 
collection: 'Repos', 
params: { user: params.login } 
} 
}; 
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this.app.fetch(spec, function (err, result) { 

callback (err, result); 

}) 3 

} 

3 

如 果 没 有 相应 的 模型 和 和 集合， 就 无 法 获取 数据 。 下 面 我 们 来 创建 模型 和 和 集合。 
2. 模型 和 集合 
模型 和 集合 都 要 扩展 Rendr 提 供 的 基 对 象 。 下 面 我 们 就 来 创建 模型 和 集合 。 以 下 是 基 模 型 的 

代码 ， 保 存在 app/models/base.js 文 件 中 : 


Var RendrBase = require('rendr/shared/base/model'); 





























module.exports = RendrBase.extend({}); 
基 集 合 也 一 样 简单 。 不过, 你 可 以 像 下 面 这 样 自己 创建 一 些 基 对 象 , 便于 在 多 个 模型 之 间 共 
享 功 能 。 


Var RendrBase = require('rendr/shared/base/collection'); 








module.exports = RendrBase.extend({}); 

我 们 要 使 用 获取 数据 时 想 使 用 的 端点 来 定义 模型 。 在 这 个 示例 中 , 我 们 要 通过 GitHub API 获 
取 数 据 。 模 型 还 要 导出 一 个 唯一 的 标识 符 , 而 且 要 和 User 控 制 需 调用 app . fetch 方 法 时 使 用 的 值 
一 样 。 下 面 是 User 模 型 的 代码 ， 应 该 保存 在 app/models/user.js 文 件 中 : 


Var Base = require('./base'); 




















module.exports = Base.extendl({ 
Url: Vusers/ TOginz 
idAttribute: 'login' 

反光 


module.exports.id = 'User'; 

只 要 模型 没有 任何 验证 函数 或 计算 数据 的 函数 ， 它 们 的 内 容 就 差不多 : 一 个 url 端 点 、 
的 标识 符 , 以 及 用 来 查询 单个 模型 实例 的 参数 名 称 。 学 习 了 后 面 第 9 章 对 REST API 设 计 的 介绍 后 ， 
你 会 发 现 ， 像 这 样 构造 URL 感 觉 更 自然 。Repo 模 型 的 代码 如 下 所 示 : 


Var Base = require('./base'); 



































module.exports = Base.extendl({ 
url: '/repos/:owner/:name', 
idAttribute: 'name' 

的 这 


module.exports.id = 'Repo' : 

通过 7.4 节 分 析 的 案例 我 们 得 知 ， 集 合 需 要 引用 一 个 模型 才能 知道 要 处 理 的 是 什么 类 型 的 数 
据 。 集 合 和 模型 类 似 ， 也 使 用 一 个 唯一 的 标识 符 告 诉 Rendr 这 是 什么 集合 ， 还 会 指定 从 哪个 URL 
获取 数据 。 下 面 是 Users 集 合 的 代码 ， 应 该 保存 在 app/collections/users,js 文 件 中 : 
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require('../models/user'); 
require('./base'); 


Var User = 
Var Base = 
module.exports = Base.extendl({ 
model: User, 
url: '/users' 
生字 
module.exports.id = 'Users'; 


Repos 集 合 的 内 容 与 之 类 似 ， 只 不 过 使 用 的 是 Repo 模 型 ， 而 且 使 用 不 同 的 URL 从 REST API 
中 获取 数据 。 下 面 是 Repos 和 集合 的 代码 ， 应 该 保存 在 app/collections/repos.jjs 文 件 中 : 


Var Repo 
Var Base 


























require('../models/repo'); 
require('./base'); 


module.exports = Base.extendl({ 
model: Repo, 
url: '/users/:user/repos' 
}) 
module.exports.id = 'Repos'; 


现在 ， 用 户 访问 一 个 URL 时 ， 路 由 器 决定 使 用 哪个 控制 器 动作 处 理 ， 然 后 动作 从 API 中 获取 
数据 ， 再 调用 回调 。 最 后 ， 我 们 来 看 一 下 视图 如 何 泻 染 HTML 。 

3. 视图 和 模板 

和 Rendr 中 大 多 数 其 他 操作 一 样 ,定义 视图 的 第 一 步 是 扩展 Rendr 的 基 视 图 ， 并 创建 自己 的 基 
视图 。 我 们 这 个 基 视 图 应 该 保存 在 app/views/base.js 文 件 中 ， 代 码 如 下 所 示 : 


Var RendrBase = require('rendr/shared/base/view'); 




















module.exports = RendrBase.extend({}); 


我 们 首先 要 编写 首页 的 视图 。 这 个 视图 应 该 保存 在 app/views/home/index.js 文 件 中 , 代码 如 下 
所 示 。 可 以 看 出 ， 视 图 也 要 导出 标识 符 。 

Var BaseView = tequire('../base'):; 

modqule .exports = BaseView.extend(t{ 


3 
module.exports.id = 'home/index'; 


这 个 视图 的 内 容 大 部 分 是 指向 其 他 视图 的 链接 , 没有 多 少 功 能 要 实现 , 所 以 基本 上 没有 多 少 
代码 。 用户 列 表 视 图 几乎 和 首页 视图 一 样 , 保存 在 app/views/users/index.js 文 件 中 , 代码 如 下 所 示 : 


Var BaseView = require('../base'); 























module.exports = BaseView.extend(t{ 


}); 
module.exports.id = 'users/index'; 


用 户 详 细 信 息 的 视图 保存 在 app/views/users/show.js 文 件 中 。 这 个 视图 要 操作 模板 数据 ， 也 就 
是 我 所 说 的 视图 模型 ， 让 repos 对 象 能 在 模板 中 使 用 ， 如 下 列 代码 清单 所 示 。 
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代码 清单 7.23 ”让 repos 对 象 能 在 模板 中 使 用 


Var BaseView = require('../base'); 


module.exports = BaseView.extendl({ 
getTemplateData: function () { 
var data = BaseView.prototype.getTemplateData.call (this); 
data.repos = this.options.repos; 
return data; 
} 
9 
module.exports.id = 'users/show'; 


最 后 要 编写 的 视图 是 一 个 局 部 视图 ， 用 来 泻 染 仓库 列表 。 这 个 视图 应 该 保存 在 app/views/ 
user_repos_view.js 文 件 中 。 从 下 列 代码 可 以 看 出 ， 局 部 视图 和 其 他 视图 几乎 没有 区 别 ， 也 需要 视 
图 空 制 句 : 


var BaseView = require('./base'); 























module.exports = BaseView.extendl(t{ 
3 


module.exports.id = 'user_repos_ view'; 
最 后 ,我们 还 要 编写 视图 模板 。 要 编写 的 第 一 个 视图 模板 是 layout.hbs 文 件 。 这 个 文件 中 的 
HTML 是 所 有 模板 的 容器 ， 如 下 列 代码 清单 所 示 。 注 意 ， 我 们 使 用 JavaScript 引 导 并 初始 化 了 应 














用 数据 一 Rendr 要 求 这 公 做 。 路 由 发 生变 化 时 ，{{{boay1)1} 表 达 式 会 被 动态 替换 成 视图 的 深 
染 结果 。 


代码 清单 7.24 引导 应 用 数据 


<!ldoctype html> 
<html> 


<head> 
<title>Entourage</title> 
</head> 


<body> 
<div> 
<a href='/'>GitHub Browser</a> 
</div> 
<ul> 
<li><a href='/'>Home</a></1i> 
<li><a href='/users'>Users</a></1i> 
</ul> 


<section id='content' class='container'> 
{{{body}}} 
</section> 


<script src='/bundle.js'></script> 
<script> 
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(function() { 
Var App = window.App = new (require('app/app')) ({{json appData}}); 
App.bootstrapData({{json bootstrappedData}}); 
App.start (); 

}) (); 

</script> 

</body> 
</html> 


接 下 来 要 编写 首页 的 视图 模板 。 这 个 模板 保存 在 app/templates/home/index.hbs 文 件 中 ， 只 有 
几 个 链接 ,不 使 用 视图 模型 中 的 数据 。 注 意 ，Backbone 会 捕获 匹配 某 个 路 由 的 应 用 内 链接 ,让 应 用 
表现 得 像 是 单 页 应 用 一 样 。 点 击 链接 后 ，Backbone 不 会 重新 加 载 整个 页 面 ， 只 会 加 载 相应 的 视图 。 























<hl>Entourage</h1> 
<p> 
Demo on how to use Rendr by consuming GitHub’s public API. 
<p> 
Check out <a href='/repos'>Repos</a> or <a href='/users'>Users</a>. 
</p> 


现在 , 事情 变 得 更 有 趣 了 。 我 们 要 遍历 控制 右 动 作 获 取 的 一 组 模型 , 泻 染 一 个 用 户 列 表 , 并 
把 各 个 用 户 链接 到 账户 的 详细 信息 页 面 。 这 个 模板 保存 在 app/templates/users/index.hbs 文 件 中 , 代 
码 如 下 所 示 : 


<hil>Users</hi1> 











<ul> 
{{#each models}} 
区 
<a href='/users/{{login}}'>{{login}}</a> 
</1i> 
{{/each}} 
</ul> 


下 面 我 们 要 编写 显示 用 户 详 细 信 息 的 模板 , 这 个 模板 保存 在 app/templates/users/show.hbs 文 件 
中 ,代码 如 下 列 代码 清单 所 示 。 注 意 我 们 是 如 何 告诉 Handlebars 加 载 user_ repos_view 局 部 视图 的 ， 
并 注意 这 个 名 称 和 局 部 视图 中 定义 的 标识 符 是 一 模 一 样 的 。 
代码 清单 7.25 ”编写 显示 用 户 详 细 信 息 的 模板 


<img src='{{avatar url}}' width='80' height='80' /> {{login}} 
({{public_repos}} public repos) 























国信 过 


<div> 
<div> 
{{view 'user_repos_view' collection=repos}} 
</div> 


<div> 
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<h3>Info</h3> 
< 
<table> 
bs 
<th>Location</th> 
<td>{{location}}</td> 
/Er 
cE 
<th>Blog</th> 
<td>{{blog}}</td> 
</tr> 
</table> 
</div> 
</div> 


我 们 要 编写 的 最 后 一 个 视图 模板 是 用 户 仓库 列表 模板 ， 这 是 个 局 部 视图 模板 ， 应 该 保存 在 
app/templates/user repos_view.hbs 文 件 中 。 在 这 个 模板 中 ， 我 们 要 迭代 一 组 仓库 ， 显 示 每 个 仓库 
的 重要 信息 ， 如 下 列 代码 清单 所 示 。 


代码 清单 7.26 编写 用 户 的 仓库 列表 模板 
<h3>Repos</h3> 
<table> 
<thead> 
区 
<th>Name</th> 
<th>Watchers</th> 
<th>Forks</th> 
he 
</thead> 
<tbody> 
{{#each models}} 
ES 
<td>{{name}}</td> 
<td>{{watchers_count}}</td> 
<td>{{forks_count}}</td> 
</tr> 
{{/each}} 
</tbody> 
</table> 


可 以 松口 气 了 ， 这 个 应 用 开发 好 了 。 可 以 看 出 ， 使 用 Rendr 开 发 应 用 并 不 难 ， 我 们 只 要 编写 
应 用 所 需 的 大 量 样板 代码 即 可 。 我 相信 ， 随 着 Rendr 的 发 展 ， 我 们 要 编写 的 样板 代码 数量 会 不 断 
减少 。 使 用 Rendr 、Backbone 和 CommonJS 开 发 应 用 的 优势 在 于 ,代码 是 模块 化 的 ， 而 模块 化 是 可 
测试 代码 的 固有 特性 之 一 。 


















































7.6 总 结 
本 章 讲 了 不 少 知识 ， 归 结 起 来 有 以 下 几 点 。 
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口 知道 了 仅 使 用 jQuery 还 不 够 ， 为 应 用 制定 更 好 的 结构 有 助 于 应 用 的 开发 。 
口 简要 介绍 了 模型 -视图 -控制 器 模式 的 工作 方式 。 
口 学 习 了 Backbone 的 基本 概念 ， 然 后 使 用 Backbone 开 发 了 一 个 应 用 。 
口 使 用 CommonJS 和 Browserify 把 模块 化 的 Backbone 组 件 带 到 了 浏览 器 中 。 
口 使 用 Rendr 把 Backbone 应 用 带 到 了 服务 器 端 ， 提 升 了 可 感知 的 性 能 。 
趁 热 打铁 , 下 面 我 们 来 进一步 说 明 可 测试 性 以 及 如 何 编写 好 的 测试 。 许 多 测试 类 型 在 等 着 我 
们 学 习 呢 ， 赶 快 翻 到 下 一 页 吧 
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本 章 内 容 

口 JavaScript 组 件 单元 测试 基础 
口 使 用 Tape 编 写 单元 测试 

口 驭 件 、 侦 件 和 代理 

口 手动 在 浏览 器 中 测试 

口 使 用 Grunt 自 动 运行 测试 

口 理解 集成 测试 和 外 观测 试 























测试 能 增强 我 们 编写 的 模块 和 应 用 的 可 靠 性 , 还 能 确保 模块 和 应 用 能 按 预 期 的 方式 工作 。 在 
构建 优先 原则 中 , 我 们 要 知道 如 何 自动 运行 测试 ， 还 要 知道 如 何在 云端 运行 测试 。 本 章 会 介绍 一 
些 测试 方面 的 指导 方针 ， 以 助 你 自己 动手 , 测试 组 件 。 某 些 情况 下 ,我 会 演示 如 何 为 代码 编写 测 
试 , 让 你 对 编写 单元 测试 时 的 思维 过 程 有 个 感性 的 认识 ， 这样 当 你 自己 编写 测试 时 ， 就 会 考虑 得 
更 全 面 。 
虽然 我 不 提倡 使 用 测试 驱动 开发 (Test-Driven Development， 简 称 TDD ) 范式 ， 也 就 是 在 开 
发 任何 功能 前 先 编写 测试 , 但 我 觉得 测试 很 重要 ， 你 应 该 编写 它 。 本 章 ， 我 们 会 在 过 程 设计 和 应 
用 设计 这 两 个 话题 之 间 来 回 切换 。 下 面 先 来 学 习 如 何 编写 测试 , 然后 再 介绍 自动 运行 测试 的 工具 。 





















































十 












































为 什么 不 提倡 使 用 TDD? 

我 不 推荐 使 用 TDD， 原 因 详 述 如 下 。 我 并 不 反对 TDD 这 个 范式 ， 但 编写 测试 本 就 需要 投 
入 很 多 精力 了 ， 如果 学 习 过 程 中 再 多 个 TDD, 可 能 会 让 你 更 困惑 。 我 刚 接触 测试 时 就 遇 到 过 这 
样 的 问题 。TDD 可 能 会 让 人 不 知 所 措 ， 因 为 你 不 知道 从 哪 开 始 , 或 许 根 本 不 会 编写 测试 。 就 算 
编写 测试 了 ,也 可 能 不 得 要 领 ,测试 的 只 是 实现 方式 , 而 没 测试 底层 接口 和 预期 的 行为 。 在 党 
试 学 习 TDD 之 前 ， 我 建议 你 先 试 着 为 现 有 的 代码 编写 一 些 测试 。 这 样 ， 当 你 决定 走 TDD 这 条 
路 时 , 就 知道 如 何 组 织 代码 , 知道 哪些 部 分 需要 测试 、 哪 些 部 分 不 必 测 试 了 。 而 且 更 重要 的 是 ， 
你 还 会 知道 是 否 有 必要 编写 菜 个 测试 用 例 ， 以 及 写 出 来 有 没有 用 。 话 虽 如 此 , 但 如 果 你 有 编写 
单元 测试 的 经 验 ， 而 且 觉 得 测试 驱动 开发 适合 你 ， 那 就 忽略 我 说 的 这 些 话 吧 。 
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我 们 在 第 5 章 主 要 学 习 了 模块 化 ， 在 第 6 章 学 习 了 如 何 改 进 异 步 流程 ， 在 第 7 章 学 习 了 如 何 使 
用 MVC 模 式 ， 有 助 于 我 们 以 更 好 的 方式 组 织 代 码 。 这 些 模块 化 方面 的 举动 有 助 于 降低 设计 应 用 
过 程 中 的 复杂 度 ， 同 时 也 让 开发 出 来 的 组 件 更 小 、 更 易于 使 用 ,也 更 容易 理解 。 目 前 为 止 , 我 们 
在 第 二 部 分 做 的 这 些 工作 都 是 为 了 让 测试 变 得 更 简单 。 


























8.1 ” ”JavaScript 测试 速成 课 


测试 的 精髓 在 于 学 会 如 何 隔离 功能 , 让 功能 易于 测试 。 这 就 是 模块 化 对 于 可 测试 的 代码 如 此 
重要 的 原因 。 代 码 易于 测试 了 ,质量 就 上 去 了 一 一 代码 质量 是 构件 优先 原则 的 基石 。 耦 合 松散 的 
模块 化 代码 更 易于 测试 ， 因 为 要 考虑 的 事情 更 少 , 测试 更 细 化 ,只 需 关 注 一 小 部 分 代码 的 功能 是 
否 正 常 即 可 。 与 此 相反 ,耦合 紧密 的 整体 式 代 码 更 难 测试 ,因为 可 能 出 错 的 地 方 更 多 ， 而 且 有 些 
可 能 和 你 想 要 测试 的 功能 完全 无 关 。 


8.1.1 隔离 逻辑 单元 


我 们 以 下 列 设计 的 示例 为 例 。 这 个 方法 请 求 一 个 API 端 点 ( 第 9 章 会 介绍 API 设 计 )， 然 后 对 
数字 进行 处 理 ， 再 返回 一 个 值 。 假 设 我 们 想 确认 返回 的 值 (不 管 是 什么 ) 是 555 的 倍数 : 


function getWorkDone () { 

return get('/api/data') .then(function (res) { 
return res.data * 555; 
ye 
} 


在 这 个 例子 中 ,我们 无 需 关心 这 个 方法 中 和 计算 无 关 的 部 分 , 但 这 些 代 码 却 妨碍 了 测试 。 这 
样 一 来 ， 测 试 就 变 难 了 ， 因 为 我 们 要 处 理 与 Promise 相 关 的 操作 ， 以 确保 数据 的 计算 方式 是 正确 
的 。 我 们 可 以 考虑 重 构 这 个 方法 ， 将 其 拆 分 成 两 个 方法 ， 一 个 只 做 计算 ， 一 个 只 请 求 API; 

function getWorkDone () { 

return get('/api/data') .then(function (res) { 

return compute(res.data); 
这 
} 
function compute (data) { 


return data. 2 Do 


} 

这 样 分 离 关 注 点 之 后 ， 可 以 重用 代码 了 ， 因 为 我 们 可 能 会 在 其 他 需要 的 地 方 做 相同 的 计算 。 
不 过 更 重要 的 是 , 现在 更 容易 单独 测试 计算 功能 了 。 下 列 代码 足以 确认 compute 方 法 能 按 预 期 的 
方式 工作 : 


if (compute(3) !== 1665) { 
throw new Error('assertion failed!'); 


} 
如 果 使 用 能 帮助 测试 需求 的 库 ， 事 情 会 变 得 更 容易 。 我 会 教 你 如 何 使 用 Tape 库 ， 这 个 库 遵 守 
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一 个 名 为 “测试 一 切 协议 ”( Test Anything Protocol, 简称 TAP )" 的 单元 测试 协议 。 流行 的 JavaScript 
测试 库 还 有 Jasmine 和 Mocha 等 ,不 过 我 们 不 会 使 用 这 些 库 ， 因 为 这 些 库 设 置 起 来 很 麻烦 ,而 且 需 
要 测试 工具 ， 还 会 在 全 局 作用 域 中 使 用 大 量 的 全 局 变量 。 我 们 要 使 用 的 测试 库 是 Tape， 这 个 库 不 
需要 使 用 全 局 变量 , 也 不 需要 测试 工具 。 因 此, 不 管 是 为 Nodejs 还 是 浏览 器 编写 的 代码 , 使 用 Tape 
都 易于 测试 。 















































8.1.2 使 用 TAP 


TAP 是 一 个 测试 协议 。 包 括 Node.js 在 内 的 许多 语言 都 实现 了 这 个 协议 。 使 用 TAP 协 议 编写 的 
测试 有 以 下 几 种 运行 方式 : 
D 使 用 nodqe 直 接 在 终端 里 运行 测试 ; 
口 使 用 Browserify 把 测试 编译 成 客户 端 JavaScript 代 码 ， 然 后 在 浏览 器 中 运行 ; 
口 像 第 4 章 的 做 法 一 样 ， 远 程 运行 Travis-CI 等 自动 化 服务 。 

首先 来 介绍 如 何在 本 地 环境 中 使 用 Tape， 即 直接 在 浏览 器 中 运行 测试 。8.4 节 会 介绍 如 何 使 
用 Grunt 自 动 运行 测试 ， 这 样 我 们 就 不 用 手动 打开 浏览 器 了 。 我 还 会 介绍 如 何在 CI 流程 中 添加 这 
一 步 。 
编写 在 浏览 器 中 运行 的 JavaScript 单 元 测试 ， 一 开始 可 能 会 让 人 困惑 。 我 们 要 先 在 Node 中 编 
写 无 意义 的 单元 测试 ， 然 后 在 浏览 器 中 运行 ， 在 此 之 后 才能 运用 单元 测试 的 原则 和 建议 (8.2 节 


介绍 )。 

































































8.1.3 编写 第 一 个 单元 测试 


我 们 编写 的 第 一 个 在 浏览 器 中 运行 的 单元 测试 , 是 本 章 前 面 提 到 的 compute 方 法 的 测试 。 我 
们 把 这 个 函数 写 入 一 个 CommonJS 模 块 ， 详 见 下 列 代 码 片 段 ， 保 存在 srccompnute.js 文 件 中 。 这 个 
示例 在 本 书 配套 源码 的 ch08/01_your-first-tape-test 文 件 夹 中 。 


module.exports = function (data) { 
return data * 555; 


3 

使 用 Tape 为 这 个 方法 编写 的 单元 测试 如 下 列 代码 所 示 , 保存 在 test/compute.js 文 件 中 。Tape 库 
提供 了 一 个 接口 ， 用 于 声明 基本 的 断言 (8.2 节 会 进一步 介绍 断言 )。 创建 测试 文件 后 ， 我 们 要 引 
入 Tape 库 ， 将 其 赋值 给 一 个 变量 ， 这 个 变量 会 提供 一 个 接口 ， 供 我 们 编写 测试 。 使 用 Tape 编 写 的 
每 个 测试 用 例 都 有 两 个 参数 ， 一 个 是 描述 信息 ， 一 个 是 测试 方法 。 


var test = require('tape'); 
Var compute = require('../src/compute.js'); 





















































test('compute() should multiply by 555', function (t) { 
t.equal (1665, compute(3)); 


























GD 关于 测试 一 切 协议 的 详细 信息 ， 请 访问 http:/testanything.org。 
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t.end(); 
rs 


注意 , 我 们 要 使 用 require 导 入 要 测试 的 compute 方 法 ,因为 Tape 不 会 自动 加 载 源 码 。 同 样 
地 ,我 们 也 要 使 用 require 导 入 tape 模 块 。Tape 的 API 相 当 简单 ， 我 们 要 调用 t .end () 方 法 来 表 
明 测试 结束 了 。 Tape 的 主要 功能 是 执行 作出 假设 的 断言 , 然后 记录 测试 结果 。 如果 想 运行 使 用 Tape 
编写 的 测试 ， 只 需 使 用 Node 执 行 相应 文件 中 的 代码 : 

node test/compute.js 


下 面 介 绍 在 浏览 器 中 运行 使 用 Tape 编 写 的 测试 需要 做 的 工作 。 


8.1.4 在 浏览 器 中 运行 使 用 Tape 编 写 的 测试 


若 想 在 浏览 器 中 运行 使 用 Tape 编 写 的 测试 ， 基 本 上 只 需要 使 用 Browserify 编 译 测试 。 我 们 可 
以 使 用 全 局 安装 的 Browserify 包 运行 ， 也 可 以 使 用 Grunt 自 动 运行 ， 这 里 我 们 选择 后 者 。 为 此 , 我 


们 需要 安装 grunt-browserify 包 : 






















































































npm install --save-dev grunt grunt-browserify 


安装 好 grunt-browserify 包 之 后 ,我 们 要 按照 第 一 部 分 介绍 的 方式 在 Gruntfile.js 文 件 中 配 
置 browserify 任 务 ， 把 CommonJS 代 码 编译 成 浏览 器 能 正确 解析 的 格式 。 对 我 们 这 个 单元 测试 
来 说 ， 可 以 像 下 列 代码 清单 这 样 配置 〈 本 书 配套 源码 的 ch08/02_tape-in-the-browser 文 件 夹 中 有 这 
个 代码 清单 )。 


代码 清单 8.1 把 代码 编译 成 浏览 右 能 解释 的 格式 
module.exports = function (grunt) { 
grunt.initConfig({ 
browserify: { 
tests: { 
files: { 
‘test/build/test-bundle.js': ['test/**/*.js'] 























} 


} 
je 
grunt.loadNpmTasks ('grunt-browserify'); 


}; 


browserify :tests 任 务 会 编译 代码 ， 把 结果 保存 在 一 个 文件 中 ,以 供 HTML 文 件 引 用 。 最 
后 ， 我 们 需要 创建 一 个 HTMIL 文 件 ， 内 容 如 下 列 代码 清单 所 示 。 不 过 幸运 的 是 ， 这 个 文件 创建 好 这 
之 后 就 不 用 管 了 ，Browserify 打 包 的 文件 会 执行 测试 ， 我 们 无 需 自己 动手 修改 HTML 中 的 script 
标签 或 任何 内 容 。 


代码 清单 8.2 ”在 HTML 文 件 中 引用 编译 后 的 代码 
<!ldoctype html> 
<html> 
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<head> 

<meta charset='utf-8'> 

<title>Unit Testing JavaScript with Tape</title> 
</head> 
<body> 

<script src='build/test-bundle.js'></script> 
</body> 
</html> 


如 果 要 运行 测试 , 我 们 只 需 在 浏览 器 中 打开 这 个 HTML 文件 即 可 。 本 章 后 面 还 会 介绍 如 何 使 
用 Grunt 自 动 运 行 测试 。 下 面 介绍 一 些 测试 原则 ， 并 说 明 如 何在 JavaSeript 测 试 中 运用 它们 。 


8.1.5 筹备、 行动 和 断言 


单元 测试 通常 很 难 编写 ,而 且 编 写 的 过 程 也 很 乏味 , 但 我 们 可 以 改变 这 种 状况 。 如 果 编 写 代 
码 时 考虑 到 了 模块 化 和 可 测试 性 ,代码 的 测试 就 会 容易 得 多 。 如 果 代 码 整体 紧密 耦合 在 一 起 ,， 测 
试 就 会 变 复杂 。 这 是 因为 ,隔离 确认 小 型 组 件 的 功能 时 无 需 关 注 依 赖 ， 此 时 能 最 大 限度 地 发 挥 涡 
试 的 功效 。 这 种 测试 叫 单元 测试 。 另 外 一 种 最 常见 的 测试 类 型 是 集成 测试 ， 用 于 测试 组 件 之 间 是 
否 能 按 预 期 交互 ， 关 注 的 是 多 个 组 件 相 互 配合 实现 的 功能 。 图 8-1 对 这 两 种 测试 进行 了 对 比 。 
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单元 测试 集成 测试 
隔离 测试 单个 组 件 测试 不 同 组 件 之 间 的 交互 





测试 面 尽量 宏 测试 面 尽量 广 
依赖 使 用 驭 件 或 柱 件 实现 ee 




















目的 是 只 测试 一 个 组 件 ] 目的 是 把 应 用 看 成 一 个 整体 进行 测试 
纯 函 数 最 适合 使 用 单元 测试 集成 测试 最 适合 在 浏览 器 中 自动 运行 




















图 8-1 单元 测试 和 集成 测试 之 间 的 区 别 。 注 意 ， 这 两 种 测试 都 要 编写 ， 二 者 之 间 不 是 
相互 排斥 的 。 纯 函数 将 在 8.1.15 节 讨论 








8.1.6 ”单元 测试 


集成 测试 关注 的 是 组 件 之 间 的 交互 , 而 好 的 单元 测试 应 该 主动 忽略 这 种 交互 ,只 关注 隔离 环 
境 中 单个 组 件 的 工作 方式 。 而 且 , 好 的 单元 测试 不 关心 组 件 的 实现 细节 ,只 关注 组 件 的 公开 API。 
这 意味 着 , 好 的 单元 测试 可 以 看 成 组 件 预期 工作 方式 的 示例 。 如 果 包 的 文档 缺失 了 ， 有 时 就 可 以 
使 用 单元 测试 蔡 代 ， 虽然 它 并 不 完美 。 
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好 的 单元 测试 常常 遵守 “筹备 -行动 -断言 ”( Arrange Act Assert， 简 称 AAA ) 模式 ， 在 单元 测 
试 中 伪造 依赖 ， 然 后 监视 方法 ， 确 保 它们 被 调用 。 随 后 的 几 节 会 探讨 相关 概念 。 在 8.3 节 之 前 ， 
我 们 会 编写 一 些 真实 的 单元 测试 用 例 。 

AAA 模式 能 帮助 我 们 写 出 简洁 有 序 的 单元 测试 。 使 用 这 个 模式 编写 单元 测试 分 为 三 步 。 
D 筹备 : 创建 测试 中 需要 的 所 有 实例 。 
D 行动 : 运行 测试 ， 记 录 结 果 。 
口 断言 : 验证 结果 和 预期 的 输出 是 否 一 致 。 

按照 这 简单 的 三 步 做 , 浏览 单元 测试 时 我 们 能 清晰 地 看 到 这 个 过 程 。 例 如 ,断言 可 以 用 来 判 
断 typeof {} 的 结果 是 否 为 object。 注 意 ， 如 果 这 三 步 能 简化 成 一 行 可 读 的 代码 ， 那 么 你 或 许 
应 该 这 样 做 。 
8.1.7 ”便利 性 优 于 约定 

有 些 纯粹 主义 者 认为 ， 一 个 单元 测试 中 只 能 有 一 个 断言 。 我 的 建议 是 务实 ， 只 要 是 在 测试 同 
一 个 功能 , 一 个 测试 中 就 可 以 编写 多 个 断言 。 这 样 做 没有 什么 不 良 后 果 ， 因 为 测试 工具 ( 这 里 用 


的 是 Tape ) 会 准确 地 告诉 你 哪个 测试 中 的 哪个 断言 失败 了 。 一 个 测试 中 只 写 一 个 断言 ,往往 会 导 
致 大 量 的 重复 代码 ， 而 且 测试 过 程 漫 长 ， 让 人 灰心 丧气 。 


8.1.8 案例 分 析 : 为 事件 发 射 器 编写 单元 测试 


下 面 我 们 为 第 6 章 实现 的 snitter 函 数 编写 测试 ， 看 看 真实 的 单元 测试 是 如 何 呈 现 的 。 
emitter 限 数 的 作用 是 改造 对 象 , 让 对 象 能 触发 和 监听 事件 ,完整 的 代码 如 下 列 代码 清单 所 示 ( 在 
本 书 配 套 源码 的 ch08/03_arrange-act-assert 文 件 夹 中 ), 这 和 6.4.2 节 实现 的 emitter 函 数 是 一 样 的 。 


代码 清单 8.3 emittezr 国 数 的 实现 
function emitter (thing) { 
var events = {}; 




















































































































le 蔷 
thing = {}; 
} 


thing.on = function (type, listener) { 
if (!events[type]) { 
events[type] = [listener]; 
} else { 
events [type] .push (listener); 
} 
}; 


thing.emit = function (type) { 
var evt = events[typel]; 
if (!evt) { 
return; 
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} 
Var args = Array.prototype.slice.call (arguments, 1); 
for (var i = 0; i < evt.length; i++) { 
evt[i].apply (thing, args); 
} 
es 


return thing; 


} 

这 个 函数 这 么 长 , 怎么 测试 所 有 功能 呢 ? 很 简单 : 测试 接口 , 其 他 的 都 不 重要 。 我们 要 确认 ， 
首 定 正 确 的 参数 时 ， 公 开 API 中 的 每 个 方法 都 能 做 预期 的 事情 。 对 这 个 emitter 函 数 来 说 ， 公 开 
API 包 含 这 个 函数 本 身 、on 方 法 和 emit 方 法 。 公 开 API 是 使 用 者 能 访问 的 方法 ， 也 就 是 我 们 要 验 
证 的 。 
编写 好 的 单元 测试 可 以 理解 成 对 正确 的 事情 作 断 言 。 测 试 要 验证 的 断言 应 该 能 确定 而 且 也 
要 忽略 实现 细节 ， 例 如 存储 事件 监听 器 的 方式 。 私 有 方法 通常 是 实现 细节 ， 不 应 该 测试 ， 而 
关注 公开 接口 。 如 果 想 测试 私有 方法 ， 应 该 将 其 公开 ， 以 便 像 公 开 接 口中 的 其 他 方法 一 样 进 
单元 测试 。 


8.1.9 测试 事件 发 射 器 


首先 ， 我 们 来 编写 一 个 测试 ， 看 看 把 不 同 的 参数 传 给 emitter 函 数 是 否 能 得 到 发 射 器 对 象 。 
这 是 个 基本 的 测试 ， 在 这 个 测试 中 ,我 们 会 验证 返回 的 对 象 是 否 有 预期 的 属性 (on 和 emit )。 


代码 清单 8.4 使 用 Tape 编 写 的 第 一 个 测试 
var test = require('tape'); 
var emitter = require('../src/emitter.js'); 















































训 并 















































test('emitter(thing) should always return an emitter', function (t) { a 





// 行动 [一 2 
isEmitter (emitter()); 一 定 要 使 用 有 意义 的 
isEmitter (emitter ({})); 名 称 定义 测试 用 例 。 
isEmitter (emitter([])); 
function isEmitter (thing) { 一 个 参数 说 明 则 

// 断言 第 二 1 参数 说 明 断 

t.ok(thing, 'should be truthy'); 有 言 的 作用 。 

t.ok(thing.on, 'should have on property'); 站 性 7 

t.ok(thing.emit, 'should have emit property'); Ps 是 否 有 .on 属性 


} 


t.end(); < 小、 让 Tape 知 道 测试 
}); 结束 了 。 


在 单元 测试 中 对 预期 的 操作 进行 基本 的 断言 是 很 不 错 的 行为 。 记 住 ,我 们 只 和 需 编写 一 次 测试 ， 
然后 随时 都 能 执行 测试 ,验证 断言 是 否 正确 。 下 面 我 们 再 编写 一 些 基本 的 断言 ， 以 确保 返回 的 对 
象 和 传人 的 对 象 是 相同 的 ， 如 下 列 代码 清单 所 示 。 


























图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


8.1 JavaScript 测试 速成 课 191 





代码 清单 8.5 ”编写 一 些 基 本 的 断言 


test('emitter(thing) should reference the same object', function (t) { 


var data = { a: 1 }; // 筹备 
var thing = emitter(data); // 行动 
t.equal (data, thing); // 断言 
t.end(); 


} 


test('emitter(thing) should reference the same array', function (t) { 


var data = [1, 2]; // 筹备 
var thing = emitter(data); // 行动 
t.equal (data, thing); // 断言 
t.end(); 


I 


编写 基本 的 JavaScript 单 元 测试 时 ， 有 时 你 会 发 现 需要 判断 一 个 函数 是 否 真 正 是 函数 。 如 果 
emitter 不 是 函数 ， | 我 们 也 无 需 单独 测试 emitter 是 否 为 
函数 ， 因 为 在 单元 测试 中 可 以 有 宛 余 。 而 nt a i i 而 在 筹备 和 行动 这 两 步 
中 都 不 能 失败 。 A a 能 表明 我 们 要 再 添加 一 些 测试 , 宣称 不 该 在 这 些 地 
方 失败 ， 或 者 问题 可 能 出 现在 代码 中 。 

测试 对 象 的 类 型 看 起 来 很 繁琐 ,但 却 是 十 分 必要 的 。 实 际 上 , 测试 返回 值 的 类 型 更 重要 。 我 
们 编写 的 第 一 个 测试 确认 了 属性 的 存在 ,但 是 没有 检查 那些 属性 是 否 为 函数 ,下 面 我 们 重 构 下 ， 
加 上 类 型 检查 。 其 中 一 些 改动 可 能 看 起 来 微不足道 , 但 是 为 了 表述 清楚 ,我 们 要 明确 表明 断言 的 
作用 。 


代码 清单 8.6 在 测试 中 检查 类 型 
test('emitter(thing) should be a function', function (t) { 
t.ok(emitter, 'should be truthy'); 





















































pl 
映 





























t.ok(typeof emitter === 'function', 'should be a method'); TN 
t.end(); NE 捍 
js 不 测试 值 是 否 为 真 ， 而 是 
测试 类 型 是 否 为 函数 。 
test('emitter(thing) should always return an object', function (七 ) { 
// 行动 


isEmitter (emitter()) 
isEmitter (emitter({})); 
isEmitter (emitter([] 


function isEmitter (thing) { 





// 断言 
t.ok(thing, 'should be truthy'); 
t.ok(typeof thing.on === 'function', 'should have on method'); 
t.ok(typeof thing.emit === 'function', 'should have emit method'); 
} 
t.end(); 


3 
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8.1.10 测试 .on 方法 


接 下 来 我 们 要 编写 .on 方法 的 测试 。 这 一 次 , 我 们 只 要 确认 调用 .on 方法 不 会 抛 出 异常 即 可 。 
稍 后 ， 测 试 emit 方 法 时 我 们 会 确认 监听 需 是 否 可 用 。 注 意 ， 我 编写 了 两 个 几乎 完全 一 样 的 测试 ， 
不 过 二 者 的 作用 不 同 。 在 测试 中 经 常会 发 现 重复 的 代码 , 需要 重复 使 用 时 可 以 复制 粘贴 , 不 过 不 
能 有 太 多 重复 的 代码 。 


代码 清单 8.7 测试 .on 方法 
test('on(type, listener) should attach an event listener', function (t) { 


// 筹备 


var thing = emitter(); 


















































function listener () {} 

// 断言 

t.doesNotThrow(function () { 此 时 ， 确 认 thing .on 
A 8 不 会 抽出 异常 。 


thing.on('foo', listener); 
}); 
t.end(); 


test('on(type, listener) should attach many event listeners to the same 


event', function (t) { 

// 筹备 

Var thing = emitter(); 

function listener () {} 

// 断言 

t.doesNotThrow(function () { 多 次 调用 on 方法 也 
// 行动 不 会 抛 出 异常 。 


thing.on('foo', listener); 
thing.on('foo', listener); 
thing.on('foo', listener); 
过 
t.end(); 
a 
接 下 来 ,我 们 要 测试 emit 方 法 。 和 之 前 一 样 ， 我 们 要 依附 几 个 监听 器 ， 然 后 触发 事件 。 随 
后 我 们 要 验证 是 否 触发 了 正确 的 监听 器 ， 而 且 每 次 调用 .on 方法 只 会 触发 一 次 。 注 意 ， 如 果 把 事 
件 句 柄 放 在 setTimeout 函 数 中 ， 异步 调用 emit 方 法 ,这 个 测试 会 失败 。 针 对 这 种 情况 ， 我们 可 
以 根据 新 功能 修改 测试 ， 或 者 从 一 开始 就 禁止 修改 功能 。 


代码 清单 8.8 测试 .emit 方 法 


test('emit (type) should emit to the event listeners', function (七 ) { 



































// 筹备 
var thing = emitter(); ss 注意 , 我 们 清楚 地 把 测试 分 成 了 筹备 、 行 
var listens = 0; 动 和 断言 三 步 。 在 测试 中 应 该 这 样 做 。 
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function listener () { 
listens+t+; 


) 


// 行动 

thing.on('foo', listener); 
thing.on('foo', listener); 
thing.emit ('foo'); 


a 有 时 候 , 统计 函数 调 
4/ 用 了 多 少 次 就 够 了 。 


t.equal (listens, 2); 




















t.end(); 
3 
最 后 ， 我 们 再 编写 一 个 测试 ， 确 认 emit 方 法 会 按 我 们 预期 的 那样 把 传 入 的 任何 参数 传 给 事 
件 监听 右 。 


代码 清单 8.9 进一步 测试 emit 方 法 


test('emit (type) should pass params to event listeners', function (t) { 


// 筹备 
Var thing = emitter(); 
var listens = 0; 


function listener (context, value) { 


t.equal (arguments.length, 2); 确认 结果 和 预期 的 
t.equal (context, thing); 一 样 ， 不 多 不 少 。 
t.equal (value, 3); 
listens+t+; 

} 

// 行动 


thing.on('foo', listener); 
thing.on('foo', listener); 
thing.emit('foo', thing, 3); 


// 断言 
t.equal (listens, 2); 
t.end(); 


}); 

大 功 告 成 ! 至 此 我 们 实现 的 事件 发 射 器 有 完整 的 测试 了 。 我 们 只 编写 了 断言 来 验证 了 公开 
API 的 工作 方式 ， 没 有 涉及 实现 细节 。 现 在 ， 我 们 可 以 为 API 非 常规 的 使 用 方式 编写 测试 了 ， 例 
如 不 带 任何 参数 地 调用 smit () 方 法 。 随 后 ， 我 们 可 以 决定 遇 到 这 种 情况 时 emit 方 法 是 否 要 抛 出 
异常 。 我 们 应 该 把 测试 当成 更 严格 的 正式 的 API 文 档 。 

下 一 节 我 们 来 学 习 创建 驭 件 ， 监 视 函 数 调 用 ， 以 及 代理 require 语 句 。 


8.1.11 了 驭 件 、 侦 件 和 代理 
有 时 虽然 应 用 的 某 两 部 分 无 法 进一步 解 耦 , 但 我 们 还 是 想 将 其 隔离 。 应 用 可 能 需要 查询 真实 
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的 数据 库 ， 使 用 服务 获取 数据 ,把 不 同 的 模块 连接 在 一 起 ,或 者 由 于 其 他 原因 而 不 能 解 耦 实现 方 
式 。 在 测试 中 遇 到 这 些 紧 密 耦 合 的 情况 时 ,我们 可 以 使 用 一 些 不 同 的 方式 来 解决 ,例如 驭 件 、 侦 
件 和 代理 。 图 8-2 描 述 了 这 种 问题 ， 说 明 如 何 使 用 桩 件 来 解决 问题 。 




















源码 测试 中 的 驭 件 
正常 情况 下 执行 的 代码 辅助 和 隔离 测试 的 代码 
使 用 侦 件 替换 foo 方 法 。 
原封 不 动 地 使 用 fcc 方 法 | gonction ET 侦 件 会 记录 每 次 对 方法 的 


调用 ， 还 会 保存 传 给 foo 
方法 的 参数 ， 供 测试 检查 


在 测试 中 不 会 直接 加 载 模 
块 ， 而 是 使 用 特殊 的 函数 。 
require('./module.js') | ee 这 个 函 











返回 module .js 文件 导出 
的 API 






































图 8-2 ”测试 时 原封 不 动 地 使 用 源码 与 使 用 驭 件 的 对 比 
下 面 我 们 来 学 习 如 何 模拟 依赖 。 如 果 组 件 有 外 部 依赖 ， 测 试 时 可 以 使 用 这 种 技术 。 


8.1.12 ”模拟 


模拟 就 是 在 被 测 系统 ( System Under Test， 简 称 SUT ) 中 创建 依赖 ( 例如 服务 或 其 他 对 象 ) 
的 伪 实 例 。 在 静态 类 型 语言 中 , 模拟 时 常常 要 访问 编译 器 , 因此 这 个 过 程 通 常 叫 反射 ( Reflection )。 
作为 一 种 动态 类 型 的 语言 ，JavaScript 有 个 好 处 , 即 允 许 我 们 创建 对 象 时 只 提供 一 些 属性 即 可 , 非 
和 常 简单 。 假 设 我 们 要 测试 下 列 代码 片段 : 

function (http, done) { 


http.get ('/api/data', done); 
} 


在 真实 的 应 用 中 ， 这 段 代 码 可 能 会 通过 网 络 查询 一 个 端点 ， 并 通过 应 用 的 API 取 回 数据 。 在 
单元 测试 中 一 定 不 能 连接 外 部 服务 ， 所 以 这 种 操作 是 使 用 模拟 技术 的 最 佳 场合 。 在 这 段 代 码 中 ， 
我 们 发 起 了 一 个 cET 请 求 ,然后 调用 aone 回 调 ,并 把 可 能 出 现 的 错误 和 返回 的 数据 传 给 这 个 回调 。 

只 使 用 JavaScript 模 拟 这 个 http 对 象 其 实 很 容易 。 注 意 ， 我 们 遵照 代码 的 原意 ， 使 用 
setTimeout 国 数 蜡 步 执行 这 个 方法 ， 而 且 虚 构 了 我 们 认为 的 适合 测试 的 任何 响应 。 

{ 


get: function (endpoint, done) { 










































































setTimeout (function () { 
done(null, { data: 'dummy' }); 
0 
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这 个 测试 的 服务 器 端 部 分 ， 也 就 是 查询 真实 的 HTTP 端 点 ， 应 该 在 服务 器 的 测试 而 不 是 客户 
端 中 确认 。 我 们 还 可 以 在 集成 测试 中 测试 这 些 操 作 ， 本 章 后 面 会 介绍 。 下 面 介绍 Sinonjs。Sinon 
是 用 来 创建 驭 件 、 侦 件 和 桩 件 的 库 。 使 用 这 个 库 还 可 以 伪造 XHR 请 求 、 服 务 器 响应 和 计时 器 。 下 
面 来 看 具体 怎么 做 。 








8.1.13 ”介绍 Sinon.js 


有 时 候 ， 手 动 创建 模拟 数据 还 不 够 ， 在 复杂 的 场合 下 ， 使 用 Sinonjs 这 样 的 库 可 能 更 方便 。 
使 用 Sinon 可 以 轻易 测试 setTimeout 延 迟 、 日 期 和 XHR 请 求 , 甚至 还 能 搭建 虚假 的 HTTP 服 务 器 ， 
在 测试 中 使 用 。 使 用 Sinon 能 轻而易举 地 创建 侦 件 。 侦 件 是 一 种 函数 ， 能 告诉 我 们 它 是 否 被 调用 
了 ， 调 用 了 多 少 次 ， 以 及 调用 时 传人 了 什么 参数 。 其 实 我 们 在 代码 清单 8.9 中 已 经 使 用 了 一 种 侦 
件 , 那个 1istener 函 数 会 记录 它 被 调用 了 多 少 次 。 下 面 介绍 如 何 使 用 侦 件 测试 函数 的 调用 情况 。 


8.1.14 监视 函数 的 调用 情况 


如 果 要 测试 的 函数 有 参数 ， 可 以 很 容易 地 使 用 侦 件 测试 是 否 调 用 了 函数 ， 以 及 调用 的 方式 。 
我 们 来 看 一 个 简单 的 示例 (在 ch08/04_spying-on-function-calls 文 件 夹 中 )。 下 面 两 个 函数 的 参 
数 都 是 一 个 回调 : 


var maxwell = { 
immediate: function (cb) { 
ce("Fo0 Dar.)y 
} 
debounce: function (cb) { 
setTimeout (ch, 0); 
} 
有 


使 用 Sinon 可 以 轻易 测试 这 两 个 函数 。 我 们 无 需 编写 回调 就 能 确认 只 调用 了 一 次 immediate 
函数 : 


test('maxwell.immediate invokes a callback immediately', function (t) { 
var cb = sinon.spy(); 
































maxwell.immediate (cb); 


t.plan(2); 
t.ok(cb.calledOonce, "calledq once'); 


t.ok(cb.calledWith('foo', 'bar'), 'arguments match expectation'); 
Py 


注意 ， 我 用 .plan 代替 了 t .end。t .plan(n) 的 作用 是 定义 执行 测试 用 例 时 要 作 多 少 次 断 
言 。 如 果断 言 次 数 和 定义 的 不 相等 ， 测 试 就 会 失败 。t .plan 在 测试 异步 操作 时 最 有 用 ， 因 为 异 
步 操作 结束 后 可 能 要 调用 回调 ， 所 以 要 作 更 多 断言 。 使 用 t .plan 能 验证 真正 执行 的 次 数 和 声称 
的 次 数 是 否 相 等 。 
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测试 延迟 执行 的 操作 有 些 环 手 ， 不 过 Sinon 为 此 提供 了 易于 使 用 的 接口 ， 如 下 列 代码 清单 所 
示 。 调用 sinon .useFakeTimers () 后 , Sinon 会 伪造 后 续 所 有 使 用 setTimeout 或 set Interval 
函数 完成 的 操作 。 而 且 我 们 还 能 使 用 简单 的 tick API 来 手动 修改 时 钟 。 


代码 清单 8.10 测试 延迟 执行 的 操作 
test('maxwell.debounce invokes a callback after a timeout', function (t) { 
Var clock = sinon.useFakeTimers (); 
var cb = sinon.spy(); 














maxwell.debounce (cb); 


t Dlamt2y 
t.ok(cb.notCalled, 'not called before tick'); 
clock.tick(0); 
t.ok(cb.called, 'called after tick'); 
的 学 


除 此 之 外 ，Sinon.js 还 有 很 多 功能 ， 例 如 伪造 XHR 请 求 。 关 于 模拟 技术 ， 最 后 我 们 还 要 讨论 
一 个 话题 : 为 模块 中 使 用 require 导 入 的 依赖 创建 驭 件 。 下 面 来 看 具体 怎么 做 。 





8.1.15 ”代理 require 调 用 


有 时 我 们 会 遇 到 这 样 的 问题 : 一 个 模块 使 用 require 导 入 其 他 模块 , 而 导入 的 模块 还 要 再 导 
入 其 他 模块 ， 而 在 单元 测试 中 我 们 并 不 想 导 入 模块 。 在 单元 测试 中 我 们 要 控制 环境 ， 识 别 哪些 是 
执行 测试 必 不 可 少 的 ， 其 他 的 都 要 使 用 模拟 技术 实现 。 遇 到 这 种 问题 时 , 我 们 可 以 使 用 一 个 名 为 
proxyquire 的 npm 包 解决 。 假 设 我 们 要 测试 下 列 代 码 清单 中 的 代码 ( 在 本 书 配 套 源码 的 
ch08/05_proxying-your-dependencies 文 件 夹 中 )， 这 段 代码 的 作用 是 从 数据 库 中 读 取 一 个 用 户 ， 而 
日 为 了 安全 起 见 ， 只 返回 模型 中 的 部 分 数据 。 


代码 清单 8.11 使 用 require 方 法 


























var User = require('../models/User.js'); 
module.exports = function (id, done) { 
User.findone({ id: id }, function (err, user) { 
tf (er || TUSer): 4 


done (err); return; 

} 

done(null, { 
name: user.name, 
email: user.email 

} 

四 
入 


我 们 暂且 稍微 重 构 一 下 这 段 代 码 。 隔 离 “ 纯 粹 的 ”功能 ， 这 样 做 最 好 。 纯 函 rs 
提出 的 概念 , 这 种 函数 的 输出 只 由 输入 决定 , 不 受 任何 其 他 因素 的 影响 。 只 要 输入 相同 ， 纯 函数 
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就 会 返回 相同 的 输出 。 在 上 面 的 示例 中 , 可 重用 的 纯粹 功能 是 从 模型 中 提取 安全 的 子 集 。 那 么 我 
们 就 把 这 个 功能 提取 出 来 ， 定 义 成 单独 的 函数 ， 让 代码 看 起 来 更 舒服 ， 也 更 易于 理解 。 


代码 清单 8.12 ”创建 纯 函 数 
Var User = require('./models/User.js'): 
function subset (user) { 
return { 
name: user.name, 
email: user.email 
}; 
1 


module.exports = function (id, done) { 
User.findone({ id: idq }, function (err, user) { 
donel(lerr, user ? subset (user) : null); 
上 
}; 
不 过 ， 从 上 例 可 以 看 出 ， 如 果 不 导 出 subset 函数， 我 们 就 不 得 不 查询 数据 库 以 读 取 用 户 。 
你 可 能 觉得 这 个 模块 应 该 使 用 一 个 user 对 象 ， 而 不 单单 是 使 用 ia。 这 样 想 是 对 的 。 然 而 有 时 我 
们 不 得 不 查询 数据 库 。 或 许可 以 把 参数 改 成 user 对 象 ， 然 后 再 处 理 这 个 对 象 。 但 我 们 可 能 还 是 
要 查询 数据 库 ， 获 取 用 户 的 权限 或 所 属 的 用 户 组 。 遇 到 这 种 情况 或 这 个 示例 所 展示 的 情况 时 ， 如 
果 不 想 进一步 重 构 ， 则 可 以 让 reauire 返 回 伪 造 的 结 
使 用 proxyquire 包 的 好 处 是 , 我 们 根本 无 需 修 改 应 用 的 代码 。 下列 代 码 清单 演示 了 如 何 使 
用 proxyauire 包 模拟 导入 的 模块 ， 完 全 不 用 查询 数据 库 。 注 意 , 传 给 proxycuire 函 数 的 驭 件 
是 一 个 映射 ， 键 是 require 方 法 要 导入 的 模块 路 径 ， 值 是 想 获 取 的 结果 ( 和 正常 情况 下 获取 的 
不 同 )。 


代码 清单 8.13 ”模拟 导入 模块 


Var proxyquire = require('proxyquire'); 










































































Var user = { 
de CLE: 
name: 'Marian', 
email: 'marian@company .Com' 


旋 


Var mapperMock = { 
'./models/User.js': { 
findone: function (query, done) { 
setTimeout (done.bind(null, null, user)); 
} 
} 
}; 


Var mapper = proxyquire('../src/mapper.js', mapperMock); 
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隔离 获取 部 分 用 户 数据 的 功能 后 ， 我 们 无 需 连 接 数 据 库 了 ， 测 试 也 变 简单 了 。 我 们 要 使 用 
mapper 函 数 ， 模 拟 访 问 数据 库 ， 然 后 判断 是 否 返 回 一 个 具有 name 和 email 属 性 的 对 象 。 注 意 ， 
首次 调用 cb 侦 件 后 ， 我 们 要 使 用 Sinon 提 供 的 cb .args 获 取 参 数 。 


代码 清单 8.14 使 用 Sinon 创 建 侦 件 


Var test = require('tape'); 
var sinon = require('sinon'); 














test('user mapper returns a subset of user', function (t) { 
// 筹备 
Var clock = sinon.useFakeTimers (); 
var cb = sinon.spy(); 


// 行动 像 这 样 调用 tick 方 法 会 触发 所 有 延迟 


mapper (123, cb); ee : 
0 毫秒 芯 T t 函 数 。 
clock.tick(0); 区 为 0 毫秒 的 setTimeout 函 数 


var result = cb.args[0] [1]; 
var actual = Object.keys (result) .sort () ; 
Var expected = ['name', 'email'] .sort(); 


// 断言 

t Dlart2 

t.ok(cb.calledOonce); 

t.deepEqual (actual, expected); 
站 


下 一 节 我 会 深入 说 明 如 何在 客户 端 测试 ， 介 绍 如 何 伪造 XHR (XMLHttpRequest ) 请 求 ， 还 
会 带 你 体验 如 何 测试 DOM 交 互 。 然 后 我 们 会 学 习 如 何 自 动 运行 测试 ， 再 介绍 单元 测试 之 外 的 其 
他 测试 类 型 。 


8.2 在 浏览 器 中 测试 


测试 客户 端 代码 往往 很 难 ， 因 为 这 涉及 AJAX 请 求 和 和 DOM 交互 ， 而且 客户 端 代码 完全 没有 模 
块 化 和 合理 的 组 织 方 式 ， 为 JavaScript 测 试 人 员 带 来 了 麻烦 。 不 过 ， 我 们 在 第 5 章 使 用 Browserify 
解决 了 客户 端 代 码 的 模块 化 问题 ,Browserify 可 以 让 自 成 一 体 的 CommonJS 模 块 在 客户 端 代码 中 使 
用 ,不 过 我 们 要 在 构建 过 程 中 增加 一 步 。 

我 们 还 使 用 MVC 框 架 正确 地 分 离 了 关注 点 ， 从 而 解决 了 组 织 代码 的 问题 。 我 们 还 可 以 把 即 
将 在 第 9 章 介绍 的 REST API 设 计 知 识 运用 到 未 来 开发 的 Web 应 用 中 ， 摆 脱 前 端 应 用 普遍 存在 的 端 
点 混乱 问题 。 

在 接 下 来 的 几 节 中 , 我 们 来 学 习 如 何在 客户 端 代码 的 测试 中 模拟 XHR 请 求 和 隔离 DOM 交 互 。 
我 们 先 从 简单 的 开始 : 模拟 XHR 请 求 和 服务 器 响应 。 


8.2.1 伪造 XHR 请 求 和 服务 器 响应 
前 面 我 们 介绍 了 使 用 proxyauire 包 伪造 require 函 数 的 功能 ， 与 此 类 似 ， 我 们 可 以 使 用 
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Sinon 模 拟 XHR 请 求 ， 而 且 无 需 修改 源码 。 使 用 Sinon 还 可 以 模拟 服务 器 响应 ， 监 听 请 求 数 据 。 我 
们 使 用 XHR 请 求 ， 其 实 就 是 为 了 进行 这 些 操 作 。 图 8-3 展 示 了 如 何 使 用 这 些 模拟 方式 隔离 并 测试 
通常 需要 依赖 外 部 资源 的 代码 。 











原生 的 XMLHttpRequest 伪造 的 XHR 
正常 情况 下 执行 的 代码 辅助 和 隔离 测试 的 代码 


Sinon 使 用 自 有 的 方式 实现 


原生 的 实现 方式 通过 线 缆 原生 的 XMLHttpRequest 对 

发 送信 息 ， 要 花 时 间 连 接 new XMLHt tpRequest () 象 ， 可 以 拦截 XHR 请 求 ， 

网 络 ， 最 后 得 到 响应 。 提供 伪造 的 响应 ,无需 网 
络 连 接 就 能 测试 。 

















图 8-3 ”比较 原生 的 XMLHttpRequest 和 测试 中 伪造 的 XHR 了 驭 件 


下 面 通过 代码 说 明 应 该 怎么 做 。 在 下 列 客户 端 JavaScript 代 码 片 段 中 ， 我 们 发 起 了 一 个 HTTP 
请 求 , 获取 响应 文本 ( 在 本 书 配套 源码 的 ch08/06 fake-xhr-requests 文 件 夹 中 )。 我 使 用 superagent 
模块 来 发 起 HTTP 请 求 ,因为 这 个 库 在 服务 器 和 浏览 器 中 都 能 使 用 , 对 我 们 使 用 Browserify 编 译 模 
块 的 操作 来 说 是 最 佳 选择 。 

modqule .exports = function (done) { 

require('superagent') 


.get ('https://api.github.com/zen') 
.end (cb); 

















function cb (err, res) { 
done(null, res.text); 
} 
} 
对 这 个 示例 来 说 ， 我 们 不 想 为 superagent 模 块 编写 测试 ， 也 不 想 测试 对 API 的 调用 ， 只 想 
确认 的 确 进行 了 AJAX 调 用 。 这 个 方法 还 应 该 获取 响应 文本 ， 所 以 我 们 也 要 测试 这 个 行为 ， 如 下 
列 代码 清单 所 示 。 


代码 清单 8.15 测试 获取 响应 文本 的 方法 
Var test = require('tape'); 
Var sinon = require('sinon'); 

















test('gqotd service should make an XHR call', function (t) { 
var quote = require('../src/gqotdService.js'); 
var cb = sinon.spy(); 


quote (cb); 


teBLani(2) 
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setTimeout (function () { 
t.ok(cb.called); 
t.ok(cb.calledwith(null, sinon.match.string)); 
}; 2000)3 
2 
为 了 测试 这 个 方法 的 效果 , 我 们 可 以 这 样 做 。 但 我 们 不 能 让 网 络 状况 影响 测试 , 也 不 能 花 这 
么 长 时 间 等 待 测试 结果 。 这 个 方法 的 正确 测试 方式 是 模拟 响应 。 为 此 ， 我 们 可 以 使 用 Sinon 创 建 
一 个 伪造 的 服务 器 。 伪 造 的 服务 器 有 两 个 作用 : 其 一 ,捕获 代码 发 出 的 真实 请 求 ,将 其 转换 成 受 
伪造 服务 器 控制 的 可 测试 的 对 象 ; 其 二 , 在 测试 中 可 以 创建 请 求 的 响应 , 模拟 真实 的 服务 器 行为 。 
为 了 获得 这 样 的 功能 ， 我 们 要 在 调用 被 测 方法 之 前 使 用 sinon .fakeserver.create() 方 法 创 
建 伪 造 的 服务 器 ， 然 后 调用 发 起 AJAX 请 求 的 方法 ,， 设 定 响 应 的 状态 码 、 首 部 和 主体 ,返回 响应 。 
下 面 我 们 基于 这 些 讨论 来 修改 测试 。 


代码 清单 8.16 ”测试 “每 日 名 言 ” 服 务 


test('gqotd service should make an XHR call', function (t) { 




















Var quote = require('../src/qotdService.js'); 
var cb = sinon.spy(); 

Var server = sinon.fakeServer.create(); 

Var headers = { 'Content-Type': 'text/html' }; 
quote (cb); 

tplantd}s 


t.equals (server.requests.length, 1); 
t.ok(cb.notCalled); 


server.requests[0] .respond(200, headers, 'The cake ls a lie.'); 


t.ok(cb.called); 
t.ok(cb.calledWwith(null, 'The cake is a lie.')); 
站 小学 


可 以 看 出 ， 验 证 的 结果 是 发 起 了 一 个 请 求 ， 以 及 返回 的 响应 文本 和 预期 的 一 样 。 

在 说 明 如 何 自动 运行 测试 之 前 ， 我 们 还 要 讨论 一 个 关于 浏览 器 中 的 测试 的 话题 一 一 测试 
DOM 交 互 。DOM 交 互 和 AJAX 请 求 一 样 ， 也 很 难 测试 ， 因 为 我 们 要 想 办 法 把 分 隔 的 两 部 分 连接 
在 一 起 ， 而 且 连 接 时 要 小 心 。 


8.2.2 ”案例 分 析 : 测试 DOM 交 互 


客户 端 应 用 开发 和 测试 特别 有 趣 ， 涉 及 三 个 层面 : HTML、JavaScript 和 CSS 一 一 三 者 相互 交 
织 在 一 起 。 优 秀 的 开发 者 应 该 把 这 三 方面 隔离 开 ， 不 能 过 度 耦 合 。CSS 好 隔离 ， 我 们 在 CSS 中 编 
写 样式 类 ， 然 后 在 DOM 元 素 的 class 属 性 中 指定 要 使 用 的 类 。 如 果 对 HTML 的 结构 作 既 定 假设 ， 
CSS 就 会 变 得 支离破碎 。 优 秀 的 CSS 不 应 该 对 HTML 的 结构 有 任何 具体 的 要 求 ， 也 就 是 不 能 和 
HTML 紧密 耦合 。 
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JavaScript 和 HTML 的 关系 与 CSS 和 HTML 的 关系 类 似 ,HTML 不 应 该 对 JavaScript 作 任何 假设 。 
就 算 禁 用 了 JavaScript，HTML 也 应 该 完好 显示 ,这 叫 渐 进 增强 ， 目 的 是 以 更 快 的 速度 向 用 户 显 示 
内 容 ， 提 升 整体 的 用 户 体验 。 但 问题 是 ，JavaScript 代 码 必 须 对 HTML 结 构 有 要 求 。 获 取 DOM 节 
点 的 内 部 文本 、 依 附 事件 监听 器 、 读 取 数 据 属 性 、 设 置 属性 ， 以 及 其 他 任何 形式 的 DOM 操 作 ， 
都 要 求 有 相应 的 DOM 节 点 存在 。 

下 面 我 们 开发 一 个 虚构 的 应 用 ， 目 的 是 处 理 各 种 事件 ， 四 舍 五 和 小数。 

1. 编写 HTML 

在 这 个 应 用 中 有 个 输入 框 ， 用 于 输入 小 数 ， 点 击 按钮 后 会 显示 这 个 小 数 四 侈 五 人 后 的 结果 ， 
而 且 每 次 得 到 的 结果 都 会 添加 到 页 面 中 的 一 个 列表 里 。 页 面 中 还 有 一 个 按钮 ,用 于 清空 这 个 列表 。 
这 个 应 用 的 外 观 如 图 8-4 所 示 。 




















DOM Interaction Testing 其 
Ga 
问 丽 全 加 关口 四 六 户 回 辣 亏 梧 上 二 加 四 有 @ 加 四 
Event Bar 


Enter a number and see it rounded! 


| 9.49 Another Roundl Clear Results 


Results come here to cool om 
Do you even know what a number is? 


You are such a unit, Integers cannot be rounded! 


Rounded to 9 Anorher rownd? 




















图 8-4 ”此 次 案例 分 析 要 开发 的 应 用 


我 们 先 来 开发 这 个 应 用 。 在 开发 的 过 程 中 , 我 会 先 说 明 具 体 的 实现 方式 ， 然 后 告诉 你 这 个 小 
应 用 的 哪些 功能 要 测试 ， 以 及 如 何在 不 关心 实现 细节 的 情况 下 编写 测试 ， 覆 盖 这 些 功能 。 

这 个 应 用 的 HTML 代 码 如 下 所 示 。 注 意 ， 我 们 没有 直接 在 DOM 中 编写 任何 JavaScript 代 码 。 
对 可 测试 性 来 说 ， 分 离 关注 点 极其 重要 。 


<hil>Event Bar</h1> 
<p>Enter a number and see it rounded!</p> 
<input class='square' placeholder='Decimals only please.' /> 
<button class='barman'>Another Round!</button> 
<button class='clear'>Clear Results</button> 
<div class='result'> 
<h4>Results come here to cool off!</h4> 
</div> 


接 下 来 我 们 要 学 习 如 何 使 用 JavaScript 实 现 功 能 。 
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2. 使 用 JavaScript 实 现 功 能 

下 面 我 们 要 编写 少量 的 JavaScript 代 码 ， 使 用 JavaScript DOM API 和 前 面 的 HTML 交 互 。 我 们 
要 使 用 querySelector 方 法 查找 DOM 节 点 。 这 个 方法 是 浏览 器 原生 API 提 供 的 ， 鲜 为 人 知 但 功 
能 很 强 , 可 以 像 jQuery 那样 使 用 CSS 选 择 符 查找 DOM 节 点 。 所 有 主流 浏览 器 , 包括 Internet Explorer 
8 在 内 ， 都 支持 querySelector 方 法 。 这 个 方法 可 以 在 文档 根 节点 上 使 用 ， 也 可 以 在 任何 DOM 
节点 上 使 用 ， 从 而 允许 你 把 搜索 范围 限定 在 子 节点 中 。 如 果 想 查找 所 有 元 素 ， 而 不 是 第 一 个 ,可 
以 使 用 gsuerySselectorAl1 方 法 。 


Var barman = document .cuerySelector (' .barman' ) : 
Var square = document .querySelector('.square'); 
Var result = document .querySelector('.result'); 
Var clear = document .querySelector('.clear'); 

















注解 我 在 HTML 中 从 不 使 用 id 属 性 ， 因 为 它 会 带 来 各 种 问题 。 例 如，CSS 选 择 符 的 优先 级 会 导 
致 开发 者 在 样式 规则 中 使 用 !important, 而 且 无 法 重用 样式 , 因为 HTML 的 id 属 性 必须 
是 唯一 的 。 




















下 面 我 们 来 编写 获取 用 户 输入 的 代码 。 如 果 输 入 的 不 是 数字 ,会 报错 。 如 果 输 入 的 是 整数 ， 
也 会 报错 。 排 除 这 两 种 情况 后 ， 我 们 要 返回 四 舍 五 入 后 的 值 。 
function rounding 


( 
if (isNaN (number) 
done (new Error ( 

中 

( 





number, done) { 
小 
'Do you even know what a number is?')); 
=== Math.round (number)) { 
'You are such a unit. Integers cannot be rounded!')); 


} else if (numbe 
done (new Error 
} else { 
done (null, Math.round (number));} 
} 
} 


done 回 调 应 该 在 结果 列表 中 创建 一 个 新 段落 ， 如 果 出 错 了 ， 就 在 其 中 显示 错误 消息 ， 否 则 
显示 四 舍 五 入 后 的 值 。 如 果 出 错 了 ， 还 要 设 定 一 个 和 操作 成 功 时 不 同 的 CSS 类 ， 这样 设 计 人 员 无 
需 修改 JavaScript 就 能 为 两 种 情况 编写 不 同 的 样式 。done 回 调 的 代码 如 下 列 代码 清单 所 示 。 


代码 清单 8.17 ”编写 aone 回 调 
function report (err, value) { 
Var p = document .createElement ('p'); 





if (err) { 
p.className 
p.innerText 
else { 
p.className 
p.innerText 

} 

result.appendChild(p); 
} 


'error'; 
err.message; 


a 


'rounded'; 
'Rounded to ' + Value + '. Another round?'; 
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最 后 , 我 们 要 绑 定 点 击 事件 , 解析 输入 , 然后 再 交 给 前 面 两 个 方法 处 理 , 如 下 列 代码 片段 所 示 : 
barman.addEventListener(click, round); 


function round () { 
var number = parseFloat (square.value); 
rounding (number, report); 


} 
清空 结果 按钮 的 操作 更 容易 实现 。 监 听 带 要 删除 之 前 创建 的 所 有 段落 ， 实 现 起 来 格外 简单 。 
具体 实现 方式 如 下 列 代码 清单 所 示 。 


代码 清单 8.18 ”实现 清空 结果 按钮 的 操作 


clear.addEventListener(click, reset); 





function reset () { 
Var all = result.querySelectorAll('.result p'); 
var i = all.length; 


while (i--) { 
result.removeChild(all[il); 
} 
} 


至 此 , 这 个 应 用 的 功能 就 完全 实现 了 。 我 们 怎么 确保 以 后 重 构 时 , 现 有 功能 不 会 失效 呢 ? 我 
们 需要 对 测试 进行 确认 ， 让 测试 能 确保 代码 可 以 像 预 期 的 那样 正常 运行 ， 然 后 编写 这 些 测试 。 

3. 确定 要 编写 哪些 测试 用 例 

首先 我 要 提醒 你 一 下 ,我 们 应 该 完全 忽略 本 节 开 头 编写 的 HTML。 我 们 不 能 在 测试 中 编写 任 
何 HIML。 如 果 测 试 需要 用 到 DOM 点 ， 应 该 使 用 JavaScript 构 建 。 在 后 面 编写 的 测试 中 你 会 发 
现 ， 这样 做 比 直接 编写 HTML 还 简单 。 单 元 测试 最 重要 的 原则 之 一 是 分 离 关注 点 。 

接着 , 我 们 要 弄 清 应 用 的 功能 ， 而 且 要 和 实现 细节 区 分 开 。 对 这 个 案例 来 说 ， 可 以 把 我 们 前 
面 编写 的 所 有 代码 都 视 作 实现 细节 ， 因 为 这 个 应 用 没有 提供 API， 也 没有 提供 任何 公开 的 对 象 。 
即便 所 有 代码 都 是 实现 细节 ,我 们 仍然 能 编写 单元 测试 , 不 过 我 们 要 测试 应 用 实现 的 功能 ， 而 不 
是 各 个 方法 的 作用 。 

我 们 要 编写 的 测试 用 例 应 该 检查 是 否 实 现 了 前 面 对 这 个 应 用 功能 的 定义 〈 转 摘 如 下 )。 
























































定义 应 用 的 功能 “在 这 个 应 用 中 有 个 输入 框 ， 用 于 输入 小 数 ， 点 击 按钮 后 会 显示 这 个 小 数 四 含 
五 入 后 的 结果 ， 而 且 每 次 得 到 的 结果 都 会 添加 到 页 面 中 的 一 个 列表 里 。 页 面 
中 还 有 一 个 按钮 ， 用 于 清空 这 个 列表 。 

















以 下 列表 列 出 了 几 个 测试 用 例 。 这 些 测 试用 例 是 根据 应 用 的 功能 和 代码 中 逮 辑 上 的 约束 (可 
以 把 这 些 约 束 加 入 功能 的 定义 中 ) 归纳 出 来 的 。 注 意 ， 只 要 符合 功能 的 定义 ， 想 规划 多 少 测试 用 
例 都 行 。 下 面 是 我 设计 的 测试 用 例 。 
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口 如 果 没 输入 值 ， 点 击 按钮 后 应 该 显示 错误 消息 。 
口 如 果 输 入 的 是 整数 ， 点 击 按钮 后 应 该 显示 错误 消息 。 
口 如 果 输 入 的 是 其 他 数字 ， 点 击 按钮 应 该 得 到 四 舍 五 人 后 的 结果 。 
口 如 果 输 入 两 个 值 ， 点 击 按钮 两 次 后 应 该 得 到 两 个 结 
口 如 果 列 表 为 空 ， 点 击 清空 结果 按钮 不 会 抛 出 异常 。 
口 点 击 清空 结果 按钮 后 ， 应 该 删除 列表 中 的 所 有 结果 。 
下 面 我 们 来 编写 测试 。 我 在 前 面 提 过 ,我 们 要 在 每 个 测试 中 创建 BOM 节点。 为 此 ,我 们 要 定义 
一 个 用 于 设置 的 函数 ， 在 每 个 测试 之 前 调用 ， 用 于 创建 元 素 ; 还 要 定义 一 个 用 于 拆 缉 的 函数 ， 在 每 
个 测试 之 后 调用 ,用 于 删除 元 素 。 这 样 一 来 , 每 个 测试 的 运行 背景 都 相同 , 相互 之 间 不 会 产生 影响 。 
4. 设置 和 拆 逢 
不 知 出 于 什么 原因 ， 大 多 数 JavaScript 测 试 框架 都 会 在 测试 中 使 用 全 局 作用 域 。 例 如 ， 使 用 
Mocha (Busterjs 和 Jasmine 也 是 一 样 ) 这 个 测试 框架 时 ， 如 果 想 在 每 个 测试 前 执行 任务 ， 需 要 把 
一 个 回调 传 给 在 全 局 作用 域 中 的 beforeEach 方 法 。 事 实 上 ， 测 试用 例 应 该 使 用 全 局 作用 域 中 的 
其 他 方法 描述 ， 例 如 aescribe 和 it， 详 见 下 列 代码 清单 。 


代码 清单 8.19 ”使 用 descripbe 方 法 描述 测试 用 例 
function setup () { 
// 做 些 准备 工作 
} 



















































































describe('foo()', function () { 
beforeEach (setup); 


it('should not throw', function () { 
assert.doesNotThrow(function () { 
fOG()3 


二 
二 
六 了 


这 样 做 很 糟糕 ! 我 们 不 应 该 随意 使 用 全 局 作用 域 ， 即 便 在 测试 中 也 是 如 此 。 孝 好 Tape 没 有 这 
么 荒唐 ， 它 仍 能 在 每 个 测试 前 执行 一 些 任务 。 使 用 Tape 可 以 把 上 述 代码 改 成 下 列 代 码 清单 这 样 。 
代码 清单 8.20 ”使 用 Tape 描 述 测 试用 例 


Var test = require('tape'); 








function testCase (name, cb) { 
Var 七 = test (name, chb); 
t.once('prerun', setup); 


} 


function setup () { 
// 做 些 准备 工作 
} 
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testCase('foo() should not throw', function (t) { 
assert.doesNotThrow(function () { 
foo(); 
2 
} 
我 承认 ， 这样 做 看 起 来 更 哆 呆 , 但 是 没有 和 弄 乱 全 局 作用 域 一 一 这 是 最 早期 的 约定 之 一 。Tape 
会 在 测试 运行 的 不 同时 刻 触发 相应 的 事件 ， 例 如 prerun。 如 果 想 在 测试 之 前 和 之 后 执行 任务 ， 需 
要 定义 并 使 用 testcase 方 法 。 这 个 方法 的 名 称 无 关 紧要 ， 但 你 会 发 现 这 里 很 适合 使 用 testcase。 
function testCase (name, cb) { 
Var 七 = test (name, cb); 
t.once('prerun', setup); 
( 


t.once('end', teardown); 


} 

现在 我 们 知道 怎么 在 每 个 测试 之 前 和 之 后 执行 这 些 方法 了 ， 下 面 是 时 候 编写 测试 了 ! 

5. 准备 测试 工具 

在 setup 方 法 中 , 我 们 需要 创建 测试 要 使 用 的 各 个 DOM 元 素 , 还 要 设置 HTML 的 所 有 元 素 默认 
显示 的 内 容 。 注 意 ， 这些 测 试 不 包含 测试 HTML 本 身 ， 因 此 我 们 才 将 其 完全 和 忽略。 我们 关注 的 前 提 
是 ， 存 在 我 们 所 预期 的 HTML 结 构 ， 能 让 应 用 在 其 中 正常 运行 。 测 试 HTML 是 集成 测试 的 任务 。 

setup 方 法 的 定义 如 下 列 代码 清单 所 示 。bar 模 块 是 应 用 的 代码 ， 我 们 把 它 包含 在 一 个 函数 
中 ,以 便 在 需要 时 执行 。 这 里 ,我 们 需要 在 每 个 测试 之 前 运行 这 个 应 用 ， 把 事件 监听 需 依 附 到 刚 
创建 的 DOM 元 素 上 。 


代码 清单 8.21 定义 setup 方 法 


Var bar = require('../src/event-bar.js'); 































































































function setup () { 
function add (type, className) { 
Var element = document .CreateElement (type); 
element .className = className; 
document .body.appendChild (element); 
} 











add('input', 'square'); 

add('div', 'barman'); 

add('div', 'result'); 

add('div', ‘clear')’; 

bar (); 
} 
teardown 方 法 更 简单 ， 我 们 只 需 迭 代 一 些 选择 符 ， 把 setup 方 法 创建 的 元 素 删 除 即 可 : 
function teardown () { 

Var selectors = ['.barman', '.square', '.result', '.clear']; 








selectors.forEach(function (selector) { 
Var element = document .querySelector(selector); 
element .parentNode.removeChild(element); 
} 3 
} 
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哇 哦 ， 终 于 该 写 测试 了 。 

6. 编写 测试 用 例 

只 要 我 们 使 用 “筹备 一 行动 一 断言 ”模式 明确 分 离 关 注 点 ， 
在 第 一 个 测试 用 例 中 ,我 们 获取 class 属 性 为 barman 的 按钮 ， 点 击 这 个 按钮 
果 ， 确 认 有 了 一 个 结果 。 然 后 我 们 断言 ， 这 个 结果 的 CSS 类 和 文本 都 正确 , 妇 


代码 清单 8.22 ”断言 CSS 类 和 文本 都 正确 
testCase('barman without input should show an error', 
// 筹备 
var barman 
var result; 


EE 














function 


( 


document .querySelector('.barman'); 


// 行动 

barman.click(); 

result = document .querySelectorAll('.result p'); 

// 断言 

Et Blantakhy 

t.ok(barman); 

t.equal (result.length, 1); 

t.equal (result[0] .className, 'error'); 

t.equal (result [0] .innerText, 'Do you even know what a number is?'); 


和 这 


下 一 个 测试 也 是 检查 错误 。 确 认 能 按 预 
代码 清单 中 ， 我 们 在 输入 框 中 填写 值 


代码 清单 8.23 ”测试 错误 检查 功能 
testCase('barman with an int should show an error', 
// 筹备 
var barman 
var square 





























， 然 后 点 


击 按钮 。 


furiction (EE) € 


document .querySelector('.barman'); 
document .querySelector('.square'); 


var result; 


// 行动 
square.value 
barman.click(); 


= ! 2 


编写 或 阅读 测试 就 都 不 会 有 问题 。 
， 然 后 获取 得 到 的 结 
IH 下列 代 码 清单 所 示 。 


期 检查 错误 和 确认 功能 能 正常 使 用 一 样 重 要 。 在 下 列 


这 个 断言 的 完整 描述 
是 : You are such a 
unit. Integers cannot 


result = Qocument .querySelectorAl1(' .result p'); 

// 断言 

t Blantadyy 

t.ok(barman); 

t.equal (result.length, 1); be rounded! 
t.equal (result[0] .className, 'error'); 

t.equal (result [0] .innerText, 'Integers cannot be rounded!'); Se 


和 


至 此 ， 你 应 该 能 了 解 纺 

















写 测试 的 方式 了 。 只 要 遵守 AAA 模式 ， 很 容易 看 出 每 个 测试 的 作用 。 





下 一 个 测试 , 如 下 列 代码 清单 所 示 ， 验 证 这 个 应 用 的 功能 是 否 能 正常 使 用 。 我 们 在 输入 框 中 填写 
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一 个 小 数 ， 然 后 点 击 按钮 ， 看 看 结果 是 不 是 四 售 五 人 后 的 值 。 
代码 清单 8.24 ”验证 应 用 的 功能 是 否 能 正常 使 用 


testCase('numbers should be rounded', function (t) { 


// 筹备 
Var barman = document .querySelector('.barman'); 
Var square = document .querySelector('.square'); 


var value = 2.4; 
var result; 


// 行动 

square.value = value.toString(); 

barman.click(); 

result = document .querySelectorAll('.result p'); 


// 断言 

i 这 个 断言 的 完整 描述 是 
Rounded to %s. Another 

t.equal (result.length, 1); round? 

t.equal (result[0] .className, 'rounded'); 

t.equal (result [0] .innerText, 'Rounded to ' + Math.round(value)); 2 


3 


我 们 现在 编写 的 测试 是 建立 在 用 户 能 按照 我 们 预期 的 方式 使 用 应 用 的 前 提 之 上 的 。 有 时 候 ， 
用 户 并 不 总 是 能 按照 我 们 预期 的 那样 与 应 用 进行 交互 ， 所 以 我 们 也 要 测试 这 些 异 常情 况 。 

7. 测试 可 能 的 结果 

对 这 个 应 用 的 实现 方式 来 说 ,可 能 会 出 现 三 种 结果 : 完全 不 可 用 ， 有 了 时 可 用 ,始终 可 用 。 我 
常常 会 开玩笑 说 , 世界 上 只 有 三 个 数 : 0、1 和 无 穷 大 。 像 下 列 代码 清单 这 样 ， 确 认 点 击 两 次 按钮 
应 用 仍 能 正常 运行 就 足够 了 。 如 果 觉 得 不 够 ,随时 可 以 添加 更 多 测试 。 


代码 清单 8.25 确认 点 击 两 次 仍 能 正常 运行 
testCase('two inputs should produce two results', function (t) 
// 筹备 
var barman document .querySelector(' .barman'); 
var square document .querySelector('.square'); 
var value = 2.4; 
var result; 











// 行动 

square.value = 
barman.click(); 
square.value = 
barman.click(); 
result = document .querySelectorAll('.result p'); 


Value.toString() ; 


3 





ee 这 个 断言 的 完整 描述 是 : 
// 断言 You are such a unit. 
.plan(6); Integers cannot be 
.OK (barman); rounded! 


七 
臣 
t.equal (result.length, 2); 

t.equal (result[0] .className, 'rounded'); 

t.equal (result [0] .innerText, 'Rounded to ' + Math.round(value)); 
t.equal (result[1] .className, 'error'); 
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t.equal (result [1] .innerText， 'Int 


J 
我 们 编写 的 代码 可 能 会 抛 出 异常 ， 为 此 


egers cannot be rounded!'); 





我 们 要 花 时 间 排 查 问题 ， 就 会 影响 工作 效率 。 针 对 这 


类 问题 ， 我 们 可 以 编写 简单 的 测试 ， 确 定 调 用 方法 时 不 会 抛 出 异常 ， 详 见 下 列 代码 清单 。 后 面 介 


绍 的 自动 运行 测试 对 此 也 有 帮助 。 








代码 清单 8.26 ”确认 调用 方法 不 会 抛 出 异常 


testCase('clearing empty list does 
// 筹备 


var clear 


document .GuerySelecto 


// 断言 
t.plan(2); 
t.ok(clear); 
t.doesNotThrow (function 
clear.click(); 
3 
:2 


我 们 的 测试 组 件 不 算 大 , 最 后 仍 要 青 编 


人 


not throw', function (t) { 


P(r CLear,)y 

















个 测试 。 这 个 测试 接近 于 集成 测试 。 转换 几 个 数 








之 后 ， 我 们 要 确认 点 击 清空 结果 按钮 后 ， 确 
代码 清单 8.27 ”验证 清空 按钮 可 用 


testCase('clicking clear removes any results in the list', 


// 筹备 
var barman 
var square 
var clear 
var result; 

var resultCleared; 


document .gquerySelect 
document .GuerySelect 
document .querySelecto 


// 行动 
square. 
barman. 
square. 
barman. 
square. 
barman.click(); 

result document .querySelectorAl 
clear.click(); 
resultCleared 


value Bvt 
Slit 
value 
click( 


value 


} 
Ss Uy 
) 


7 


document .querySel 


// 断言 

t.plan(2); 

t.equal (result.length, 3); 
t.equal (resultCleared.1length, 0); 
站 汉 


测试 的 重要 价值 在 重 构 时 才能 体现 出 来 
行 测 试 。 如 果 测 试 通过 了 ， 一 切 都 没 问 题 ; 








写 
实 能 清空 结果 列表 。 


已 六 
已 直人 全 


function (七 ) { 


or('.barman'); 
or('.square'); 
r('.clear'); 


1l('.result p'); 


ectorAll('.result p'); 


RR 


。 假如 我 们 修改 了 这 个 应 用 的 实现 方式 , 然后 再 次 运 
如 果 手 动 测试 时 发 现 了 缺陷 ， 可 以 添加 更 多 的 测试 ， 








图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


8.3 案例 分 析 : 为 使 用 MVC 模式 开发 的 购物 清单 编写 单元 测试 209 























然后 修正 缺陷 。 测 试 失败 的 原因 可 能 有 两 种 ,一 个 是 测试 过 时 了 , 例如， 清空 按钮 的 作用 可 能 变 
成 了 “删除 最 旧 的 结果 ”。 如 果 测 试 过 时 了 ， 我 们 要 根据 改动 更 新 测试 。 男 一 个 可 能 导致 测试 失 
败 的 原因 是 ,改动 时 有 玖 忽 ， 以 致 功能 失效 了 。 无 需 额外 成 本 ,始终 可 以 重复 运行 ,是 测试 的 价 
值 所 在 。 

本 书 配 套 源码 的 ch08/07_dom-interaction-testing 文 件 夹 中 有 完整 可 用 的 示例 ,包含 前 面 列 出 的 
所 有 代码 。 接 下 来 ， 我 们 要 回 到 第 7 章 开发 的 那个 应 用 ， 为 其 添加 单元 测试 。 


8.3 ”案例 分 析 : 为 使 用 MVC 模式 开发 的 购物 清单 编写 单元 测试 


在 第 7 章 ， 我 们 使 用 MVC 模 式 开 发 了 一 个 购物 清单 应 用 ， 成 果 显 著 。 这 一 节 我 们 要 为 其 中 一 
个 阶段 编写 单元 测试 。 具 体 而 言 ， 你 会 和 我 一 起 为 7.4 节 结束 时 开发 出 的 应 用 编写 单元 测试 ， 那 
时 我 们 还 没 介 绍 Rendr (7.5 节 介绍 的 )。 这 个 应 用 的 源码 在 本 书 配套 源码 的 ch07/10_the-road-show 
文件 夹 中 ， 添 加 单元 测试 后 的 源码 则 在 ch08/07b testability-boulevard 文 件 夹 中 。 

7.4 市 开发 的 是 个 小 型 应 用 ， 不 过 足以 演示 如 何 慢 慢 添加 测试 ， 并 在 最 终 得 到 一 个 测试 完好 
的 应 用 了 。 如 果 没 有 下 功夫 将 应 用 模块 化 ， 那 么 这 种 渐进 式 测试 方式 会 很 难 ， 不 过 我 们 在 第 5 章 
说 明了 如 何 模块 化 ,在 第 7 章 开发 应 用 时 又 运用 了 这 些 概念 ， 所 以 实际 上 不 会 很 难 测试 。 这 一 节 
我 会 带 着 你 一 起 为 视图 路 由 器 和 模型 验证 编写 测试 。 掌握 这 些 之 后 , 你 就 可 以 为 视图 控制 器 添加 
测试 覆盖 了 。 


8.3.1 测试 视图 路 由 器 


编写 任何 测试 之 前 ,我们 都 要 先 配置 环境 ， 这样 测试 才能 运行 。 这 里 ,我 们 先 要 复制 应 用 的 
源码 ( 在 ch07/10_the-road-show 文 件 夹 中 )， 然 后 添加 本 章 制作 的 测试 工具 ( 在 ch08/02_tape-in- 
the-browser 示 例文 件 夹 中 )， 使 用 Tape 在 浏览 右 中 运行 测试 。 

准备 工作 做 好 后 ( 在 本 书 配 套 源码 的 ch08/07b_testability-boulevard 文 件 夹 中 ), 我 们 就 可 以 使 
用 Tape 编 写 测试 了 。 我 们 先 从 路 由 器 〈 如 第 7 章 的 代码 清单 7.18 所 示 ) 开始 ， 因 为 在 要 测试 的 模 
块 中 ， 这 是 最 简单 的 。 下 列 代 码 清 单列 出 了 彼 时 这 个 模块 的 内 容 ， 以 供 参 考 。 


代码 清单 8.28 ”要 测试 的 模块 
Var Backbone = require('backbone'); 
Var ListView = require('../views/list.js'); 
var AddItemView = require('../views/addItem.js'); 














































































































module.exports = Backbone.Router.extend(t{ 
routes: { 
NE 
Ge "IistIitems’", 
'items/add': 'addItem' 
} 
POOtS {Unetion () 汇 
this.navigate('items', { trigger: true }); 
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ER function () { 
new ListView(); 
es function () { 
new AddItemView(); 
}) ， 
测试 这 个 模块 时 ， 我 们 要 作 以 下 几 个 断言 : 
口 有 三 个 路 由 ; 
口 各 个 路 由 的 处 理 程序 都 存在 ; 
口 root 路 由 的 处 理 程序 要 正确 重 定向 到 1istItems 动 作 ; 
口 每 个 视图 路 由 都 要 泻 染 正确 的 视图 。 
你 可 能 已 经 迫不及待 想 测试 这 几 种 情况 了 ， 想 着 要 为 视图 创建 双 件 ,或 者 还 要 使 用 
proxyquire 为 模型 创建 桩 件 。 首 先 我 们 要 测试 确实 注册 了 三 个 路 由 ， 而 且 路 由 器 中 有 各 个 路 由 
的 处 理 程序 。 
为 此 ， 我 们 要 在 测试 文件 routes.js 中 使 用 proxyquireify (proxyquire 的 变种 ， 可 在 客户 
端 使 用 )、sinon 和 tape， 如 下 列 代 码 清 单 所 示 。 


代码 清单 8.29 视图 路 由 需 的 首 个 测试 





















































Var proxyquire = require('proxyquireify') (require); 这 样 做 是 为 了 让 proxyquire 
Var sinon = require('sinon'); 在 浏览 器 中 可 用 


var ListView; 


Var AddItemView; 这 个 方法 使 用 sinon 和 proxyquire 创 


建 视图 模块 的 桩 件 ， 因 为 我 们 只 想 测试 


function getStubbedRouter () { 视图 路 由 器 ， 对 视图 本 身 不 感 兴趣 。 


ListView = sinon.spy(); 
AddItemView = sinon.spy(); 
Var ViewRouter = proxyquire('../app/routers/viewRouter.js', { 
'../views/list.js': ListView, 
'../views/addIitem.js': AddItemView 


ks 我 们 使 用 的 是 各 个 视图 
return ViewRouter; 相对 路 由 器 的 路 径 。 


} 


test('there are three routes and route handlers', function (t) { 


// 筹备 

Var ViewRouter = getStubbedRouter(); SR 获取 视图 路 由 器 桩 
件 的 实例 。 

// 行动 

Var router = new ViewRouter(); 

// 断言 二 右 二 个 

Var routes = Object.keys (router.routes); a 人 路 由 处 

t.equal (routes.length, 3); 地: Es 

routes.forEach (exists); 确认 每 个 路 由 的 处 

t.eng(); 理 程序 都 存在 。 
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从 属性 中 获取 当前 路 由 的 处 理 
/程序 名 称 ， 例 如 1istItems。 


function exists (route) { 
Var handlerName = router.routes[routel]; 
Var handler = router[handlerNamel]; 
t.ok(handler, util.format('route handler for "%s" exists', route)); 
} 
> 
写 好 这 个 测试 文件 后 , 我 们 可 以 按照 8.4 节 的 方式 验证 测试 能 否 通 过 : 在 HTML 文 件 中 加 载 编 
译 后 打包 好 的 测试 文件 ,然后 在 浏览 器 中 打开 这 个 HTML 文 件 ， 查 看 开发 者 工具 的 控制 台中 有 没 
有 错误 消息 。 
1. 作为 测试 运行 程序 的 HTML 文 件 
首先 ， 我们 需要 一 个 作为 测试 运行 程序 的 HTML 文 件 ， 如 下 所 示 。 这 个 文件 没什么 特殊 的 ， 
只 是 加 载 了 构建 得 到 的 测试 打包 文件 : 
<!doctype html> 
<html> 
<head> 
<meta charset='utf-8'> 
<title>Unit Testing JavaScript with Tape</title> 
</head> 
<body> 
<script src='build/test-bundle.js'></script> 


</body> 
</html> 


创建 好 测试 文件 routes.js 和 作为 测试 运行 程序 的 runnerhtml 文 件 之 后 ， 我 们 要 编写 一 个 Grunt 
任务 来 构建 测试 打包 文件 。 

2. 编写 用 于 构建 测试 打包 文件 的 Grunt 任 务 

前 面 我 们 学 过 如 何 自 己 编写 任务 ， 为 了 强化 这 个 知识 ,我 们 要 自己 编写 一 个 任务 ， 使 用 
Browserify 编 译 ， 然 后 打包 。 为 此 , 我们 要 在 Gruntfile.js 文 件 中 写 和 下列 代码 清单 中 的 代码 。 这 个 
任务 直接 使 用 prowserify 包 ， 而 没有 间接 使 用 grunt -browserify 插 件 。 有 时 ， 直 接 使 用 包 比 
使 用 插件 更 灵活 ， 实 现任 务 的 功能 时 更 自由 。 


代码 清单 8.30” 自 定义 一 个 Browserify 任 务 


var fs = require('fs'); 

var glob = require('glob'); 

var mkdirp = require('mkdirp'); 

Var browserify = require('browserify'); 
















































































Var proxyquire = require('proxyquireify'); 
， ， 这 是 个 匿名 任务 ， 执 行 
function browserifyTests () { 3 本 、 
var done = this.async(); 3 完成 后 调用 daone 回 调 。 
这 是 Browserify API var dir = _ dirname + '/test/build'; 加 
的 公开 接口 。 创建 一 个 目录 结构 ， 就 算 这 些 目录 
mkdirp.sync (dir); 人 不 存在 ， 这 个 任务 仍 能 正常 运行 。 


WY prfs 转 换 方式 用 于 把 Mustache 视 图 
L 模板 编译 成 对 应 的 JavaScript 代 码 。 
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使 用 通 配 模式 获取 .plugin(proxyquire.plugin); < 一 


所 有 测试 文件 。 目前 
只 有 routes.js。 glob proxyquireify 插 件 能 拦截 对 
Nog, .sync('./test/*.js') require 了 芳 数 的 调用 ， 然后 创建 调用 bundle.require 导 入 





把 通 配 模式 获取 。 .map (resolve) 要 加 载 模块 的 桩 件 。 每 个 测试 文件 ， 然 后 返回 打 
的 相对 路 径 转换 eG ne ee me 4 一 一 一 一 一 包 好 的 代码 ， 以 便 再 链接 其 
成 绝对 路 径 。 .bundle () 他 方法 。 


A .pipe (fs.createWriteStream(dir + '/test-bundle.js')) 


.on('done', done); 以 在 浏览 器 
把 打包 好 的 代码 通 Ne 
过 管道 写 入 文件 。 function include (bundle, file) { 


bundle.require(file, { entry: true }); 数据 传输 完毕 后 ， 告 诉 
return bundle; Grunt 这 个 任务 结束 了 。 


} 
} 
function resolve (file) { 使 用 bundle.require 是 为 了 从 
return require.resolve (file); 外 部 访问 模块 -entry 标 识 的 作用 
} 是 把 这 个 模块 当成 入 口 点 。 


grunt .registerTask('browserify tests', browserifyTests); 
3. 运行 测试 
一 切 准 备 好 之 后 ， 我 们 可 以 执行 下 列 命令 ， 在 浏览 器 中 运行 测试 : 


grunt browserify_tests 
open test/runner.html 


执行 上 述 命令 后 应 该 弹出 一 个 浏览 器 窗口 。 打 开 开 发 者 工具 中 的 控制 台 ， 会 看 到 如 图 8-5 所 
示 的 输出 。 





@ Developer Tools - file:///Users/nico/dev/buildfirst/ch08/07b_testa... 
Q 0D Elements Network Sources Timeline Profiles » >= Ce 国 , 
SS 守 <topframe> v Preserve log 
TAP version 13 test-bundle, js:14070 
# there are three routes and route handlers test-bundle, js:14070 
ok 1 should be equal test-bundle, js:14070 
ok 2 route handler for "" exists test-bundle, js:14070 
ok 3 route handler for "items" exists test-bundle, js:14070 
ok 4 route handler for "items/add" exists test-bundle, js:14070 
test-bundle, js:14070 
1,..4 test-bundle, js:14070 
# tests 4 test-bundle, js:14070 
# pass 4 test-bundle, js:14070 
test-bundle, js:14070 
# OK test-bundle, js:14070 
test-bundle, js:14070 








图 8-5 开发 者 工具 中 显示 的 测试 结果 


还 有 一 个 路 由 测试 要 编写 。 下 面 我 们 要 确认 各 个 路 由 的 处 理 程序 能 各 司 其 职 : 把 用 户 重 定向 
到 其 他 路 由 ， 或 者 泻 染 特 定 的 视图 。 




















图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


8.3 ”案例 分 析 : 为 使 用 MVC 模式 开发 的 购物 清单 编写 单元 测试 213 





4. 更 多 测试 
剩余 测试 的 代码 如 下 列 代码 清单 所 示 。 我们 可 以 


代码 清单 8.31 测试 各 个 路 由 的 处 理 程序 


test('route # redirects to the #items route', function (t) { 














这 些 代码 添加 到 routes.js 测 试 文件 的 末尾 。 


[下 


// 筹备 
三 杀 ， 
Re Var ViewRouter = getStubbedRouter () ; 在 每 个 测试 的 开头 获取 
的 -at .7 和 视图 路 由 器 的 驭 件 。 
方法 。 Var router = new ViewRouter () ; 
Var handler = getRouteHandler (router, ''); getRouteHandler 方 法 的 
router.navigate = sinon.spy(); #C Te 作用 是 获取 视图 路 由 的 处 
handler (); 理 程序 。 
// 断言 
t.ok(router.navigate.calledOnce, 'called router.navigate'); 
t.ok(router.navigate.calledWith('items', { trigger: true }), 'called 
router.navigate with proper arguments'); 
t.end(); 
ys 确保 路 由 处 理 程序 
调用 了 .navigate 
test('route #items renders ListView', function (七 ) { 方法 , 把 用 户 重 定向 
// 筹备 到 正确 的 路 由 。 
Var ViewRouter = getStubbedqRouter () ; 
// 行动 
Var router = new ViewRouter(); 
Var handler = getRouteHandler (router, 'items'); 
handler (); 
// 断言 
t.ok(ListView.calledOnce, 'called ListView once'); 
t.ok(ListView.calledWithNew(), 'called new ListView()'); 3 
t.end(); 
这 确保 路 由 处 理 程 序 调 用 了 
ListView 的 构造 方法 。 


test('route #items/add renders AddItemView', function (t) { 


// 筹备 


Var ViewRouter = getStubbedRouter () ; 


// 行动 
Var router = new ViewRouter(); 
var handler = getRouteHandler (router, 'items/add'); 





handler (); 确保 路 由 处 理 程序 调 

用 了 AddItemView 的 
// 断言 构造 方法 。 
t.ok(AddItemView.calledOnce, 'called AddItemView once'); 
t.ok(AddItemView.calledWithNew(), 'called new AddItemView()'); 4 
t.end(); 


人 
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function getRouteHandler (router, route) { 
var routeHandler, key, i; 
Var routes = Object.keys (router.routes); NE 获取 这 个 路 由 器 中 注 
for (i = 0; i < routes.length; i++) { 册 的 路 由 。 
key = routes[i]; 
/下 if (route === key) { 
routeHandler = router.routes[key]; 


遍历 所 有 路 由 ， return router[routeHandler] .bindq(router) ; 本 返回 指定 路 由 的 处 理 程序 ， 
直到 找到 指定 } 然后 将 其 绑 定 到 路 由 器 上 ， 
的 路 由 为 止 。 } 把 合适 的 值 赋值 给 this。 


} 


编写 好 所 有 测试 之 后 ， 再 次 运行 那个 Grunt 任 务 ， 然 后 刷新 浏览 器 。 执 行 这 些 新 测试 组 件 得 
到 的 结果 如 图 8-6 所 示 。 

















Eg Developer Tools - file:///Users/nico/dev/buildfirst/ch08/07b_testability-... 
Q DO Elements Network Sources Timeline Profiles Resources » 汇 常量 , 


© 可 <topframe> v Preserve log 


TAP version 13 test-bundle, js:14070 
# there are three routes and route handlers test-bundle, js:14078 
ok 1 should be equal test-bundle, js:14070 
ok 2 route handler for "" exists Test-bundie js:14070 
ok 3 route handler for "items" exists test-bundle, js:149070 
ok 4 route handler for "items/add" exists test-bundle, js:14070 
# route # redirects to 《he #items route test-bundle, js:14070 
ok 5 called router,navigate test-bundle, js:14070 
ok 6 called router.navigate with proper arguments le H 
n route sitems renders ListView test-bundle, js:14070 
ok 7 called ListView once test-bundle, js:14070 
ok 8 called new ListView() Le js: 
# route #items/add renders AddItemView test-bundle, js:14070 
ok 9 called AddItemView once test-bundle, js:14070 
ok 10 called new AddItemView!() test-bundie, js:14070 
test-bundle, js:14970 
FR test-bundle, js:14070 
# tests 10 test-bundle, js:14078 
# pass 10 test-bundle, js:14079 
test=bundie, js:14070 
ok test-bundle, js:14070 


test-bundle, js:14070 








图 8-6 ”运行 这 个 测试 组 件 中 的 10 个 断言 后 得 到 的 结果 


虽然 针对 路 由 器 的 测试 很 少 , 没有 多 少 断 言 ,不 过 我 们 至 少 确认 了 各 个 路 由 都 存在 ,而 且 各 
自 的 处 理 程序 能 做 预期 该 做 的 事情 。 路 由 器 通常 是 集中 配置 应 用 的 地 方 , 测试 路 由 器 能 确认 使 用 
了 正确 的 模块 。 











8.3.2 ”测试 视图 模型 的 验证 


我 们 还 要 测试 这 个 应 用 的 模型 验证 ,提供 不 同 的 值 , 确保 在 某 些 情况 下 模型 无 效 , 符合 全 部 
验证 条 件 时 则 有 效 。 下 列 代码 清单 列 出 了 shoppingItem 模 块 的 代码 ， 以 供 参 考 。 


代码 清单 8.32 ”要 测试 的 验证 


var Backbone = require('backbone'); 








module.exports = Backbone.Model .extend(t{ 
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addToOrder: function (quantity) { 
this.set('quantity', this.get('quantity') + quantity, { 
validate: true 
国际 
} 
validate: function (attrs) { 
if (!attrs.name) { 
return 'Please enter the name of the item.'; 


if (typeof attrs.gquantity !== 'number' || isNaN(attrs.quantity)) { 
return 'The quantity must be numeric!'; 


if (attrs.gquantity < 1) { 
return 'You should keep your groceries to yourself.'; 





测试 验证 时 , 我 们 可 以 使 用 一 些 有 趣 的 JavaScript 功 能 。 因 为 我 们 想 测 试验 证 过 程 中 可 能 出 现 
的 各 种 情况 ， 所 以 我 们 可 以 创建 一 个 数组 ， 列 出 各 种 情况 ， 然 后 为 每 种 情况 编写 一 个 测试 。 

在 测试 中 遵守 DRY 原 则 的 一 种 方式 是 使 用 一 个 测试 用 例 工厂 函数 创建 一 系列 测试 用 例 , 如 下 
列 代码 清单 所 示 。 我 还 编写 了 一 个 不 在 这 个 测试 用 例 数组 中 的 测试 ， 以 示 对 比 。 


代码 清单 8.33 一 系列 模型 验证 测试 



































文 个 模型 除了 Backbone 之 外 没有 依赖 其 他 
模块 ， 所 以 这 里 不 需要 使 用 proxyquire。 


Var test = require('tape'); 0 
Var ShoppingItem = require('../app/models/shoppingItem.js'); 


Var cases = [ 

['must be constructed with a name', {}], 
每 个 测试 用 例 包 含 ['must be constructed with a quantity', { name: 'Chocolate' }]， 
一 个 描述 文本 \ 一 个 ['cannot have NaN quantity', { name: 'Chocolate', quantity: NaN }], 
模型 和 预期 的 验证 ['cannot have negative quantity', { name: 'Chocolate', quantity: -1 }],， 
结果 。 ['cannot have zero quantity', { name: 'Chocolate', quantity: 0 }] 

['is valid when both a name and a positive quantity are provided', { 

name: 'Chocolate', quantity: 1 





}, true] 
3 把 每 个 测试 用 例 传 给 
cases.forEach (testCase); A testcase 工 | 函数 
function esStcage (e) { adi rt 
test('ShoppingItem ' + c[0], function (t) { 人 3 信人。 
使 用 当前 测试 用 // 筹备 
例 中 的 模型 创建 Var expectation = !c[2]; // t.true or 七 .false 
ShoppingItem Var expectationText = ' is ' + (expectation ? 'invalid' : 'valid'); 
实例 。 


// 行动 
SR var item = new ShoppingItem(c[1], { validate: true }) 


// 断言 
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t[expectation] (item.validationError, JSON.stringifyl(c 


expectationText); 
t.end(); ws - 


J 


test('consumer can increase quantity of a shoppingItem', 
// 筹备 

当然 也 可 以 使 Var item = new ShoppingItem({ 

用 传统 方式 编 name: 'Chocolate', quantity: 1 


[1]) + 


试验 证 是 否 通过 ， 以 
和 预期 的 是 否 一 致 。 


function (t) { 


写 测试 。 }, { validate: true }); 把 几 个 物品 添加 到 购物 车 中 ， 


// 行动 A 
item.addToOrder (4) ; 总 2 然后 验证 数量 是 否 变 了 。 
// 断言 
t.equal (item.validationError, null); 
t.equal (item.get ('gquantity'), 5, 'four items got added 七 
t.end(); 

}) 池 


想象 一 下 ， 如 果 分 别 编写 每 个 测试 用 例 ， 肯 定 免 不 了 要 多 次 复制 粘贴 ， 
原则 。 











oO the order'); 


这 样 就 违背 了 DRY 


使 用 本 章 介绍 的 实践 方式 ， 我 们 还 可 以 为 视图 编写 测试 。 一 些 好 的 测试 用 例如 下 所 示 : 





口 确认 视图 使 用 的 模板 是 这 个 视图 本 该 使 用 的 ; 
口 检查 事件 句柄 是 否 在 svents 属 性 中 声明 ; 
口 确认 这 些 事件 句柄 做 了 预期 该 做 的 事 。 

调用 被 测 方法 之 前 ， 我 们 可 以 使 用 Sinon 创 建 视图 中 各 个 属性 的 驭 件 。 
练习 ， 供 你 自己 编写 。 

写 完 视图 控制 器 的 测试 之 后 ， 我 们 把 注意 力 转 移 到 自动 化 上 。 这 一 次 ， 
动 运 行 Tape 测 试 ， 还 要 学 习 如 何在 远程 集成 服务 右 中 持续 运行 测试 。 









































8.4 自动 运行 Tape 测试 























这 些 测 试用 例 将 留 作 








我 们 来 使 用 Grunt 自 


我 们 在 8.1.4 节 使 用 Grunt 自 动 执行 了 Browserify 的 编译 过 程 ,那么 如 何 把 Tape 测 斌 添加 到 Grunt 
构建 过 程 中 呢 ?” 在 Node 平 台中 运行 测试 要 比 在 浏览 器 中 运行 简单 很 多 。 前 面 说 过 ， 在 Node 平 台 











中 运行 测试 的 方法 是 把 测试 文件 的 路 径 传 给 node CLI: 
node test/something.js 


我 们 可 以 使 用 grunt -tape 搬 件 自动 运行 前 面 编写 的 测试 ， 没 有 比 这 还 




















简单 的 方法 了 。 我们 


只 需 在 Gruntfile.js 文 件 中 添加 下 列 代码 ( 在 本 书 配 套 源码 的 ch08/08_grunt-tape-node 文 件 夹 中 )， 


ee EA 


就 能 让 Grunt 运 行 Tape 测 试 。 注 意 ， 此 时 无 需 使 用 Browserify， 因 为 测试 运行 





module.exports = function (grunt) { 
grunt.initConfig({ 
tape: { 
files: ['test/something.js'] 





图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


在 Node 平 台中 。 


8.4 自动 运行 Tape 测 试 217 





} 
} 
grunt.loadNpmTasks ('grunt-tape'); 
grunt .registerTask('test', ['tape']); 
> 


在 Node 中 运行 是 很 简单 ， 那 么 在 浏览 器 中 运行 呢 ? 


8.4.1 自动 运行 浏览 器 中 的 Tape 测 试 


在 命令 行 中 运行 浏览 器 中 的 Tape 测 试 也 相当 容易 , 我们 可 以 使 用 Testling ( 也 叫 substack )。 这 
个 工具 由 James Halliday 开 发 ， 他 是 一 名 多 产 的 Node 贡 献 者 ， 也 是 Tape 的 作者 ， 对 模块 化 非常 痴 
迷 。James 没 顺手 开发 grunt -testling 包 , 不 过 为 了 不 让 用 户 失望 , 我 开发 了 grunt-testling 
包 ， 因 此 我 们 可 以 使 用 Grunt 运 行 Testling。grunt-testling 包 不 需要 任何 配置 ， 如 果 要 配置 
Testling, 方法 是 在 package.json 文 件 中 添加 一 个 名 为 Lest1ling 的 属性 ,指明 测试 文件 在 哪儿 ， 如 
下 列 代 码 清单 所 示 (在 ch08/09_grunt-tape-browser 文 件 夹 中 )。 


代码 清单 8.34 ”自动 运行 Tape 测 试 
站 


























"name": "buildfirst", 
TO “OL vO 
"author": "Nicolas Bevacqua <buildfirst@bevacqua.io>", 
"homepage": "https://github.com/bevacqua/buildfirst", 
"repository": "git://github.com/bevacqua/buildfirst.git", 
"devDependencies": { 

"Eun AO 

"grunt-contrib-cleanYs ™h0.5%0", 

orunt -testLlineg. ThL.0. Ou, 

TET 二 不 二 十 昌 人 

res lino ye LG6: 


} 
"testling": { 
"files": "test/*.js" 
lj 
} 


配置 好 Testling 之 后 ， 安 装 grunt -testling 包 ,然后 再 把 下 列 代码 添加 到 Gruntfile.js 文 件 中 
即 可 。 
module.exports = function (grunt) { 
grunt.initConfig({}); 


grunt.loadNpmTasks ('grunt-testling'); 
grunt .registerTask('test', ['testling']); 








de 
现在 ， 在 终端 执行 下 列 命令 就 能 在 浏览 器 中 运行 测试 了 : 
grunt test 


使 用 Grunt 和 Testling 运 行 测试 的 结果 如 图 8-7 所 示 。 
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OOA nico@ubuntu: ~/nico/git/bulldfirst/cho8/09_grunt-tape-browser 
| 7 
» grunt test 
[2 


TAP version 13 
# compute() should multiply by $ss 
ok 1 should be equal 














图 8-7 ”使 用 Grunt 通 过 Testling CLI 运 行 测试 











接 下 来 我 要 重 述 第 3 章 介 绍 的 一 个 概念 : 适用 于 测试 的 持续 开发 流程 。 





8.4.2 ”持续 测试 


对 测试 来 说 ， 有 个 重要 的 问题 要 考虑 : 每 次 修改 代码 后 都 要 运行 测试 , 确保 有 问题 的 代码 不 
会 在 本 地 开发 环境 中 存在 太 长 时 间 。 你 可 能 还 记得 ， 我 们 在 第 3 章 配 置 了 一 个 watch 任 务 ， 这 个 
任务 检测 到 代码 基 中 有 变动 时 会 执行 指定 的 任务 。 我们 可 以 修改 这 个 任务 的 配置 ,以 在 文件 变动 
时 运行 测试 和 lint 程 序 ， 如 下 列 代 码 清 单 所 示 。 


代码 清单 8.35 ”文件 变动 时 运行 测试 和 lint 程 序 











watch: { 

二 二 的 下 祝 证 
taskey [下 让] 
files: ['src/**/*.less'] 

Fs 

unit: { 
taskes: ['test" ll, 
fi Toss [To TES 


} 
} 


在 Node 平 台 和 浏览 右 中 都 自动 运行 测试 很 重要 。 监视 变动 然后 在 本 地 运行 测试 也 很 重要 。 此 
时 ,你 可 能 想 翻 回 第 4 章 ， 看 一 下 4.4 节 对 持续 集成 的 介绍 。 持 续集 成 是 项 目的 基本 设置 ， 每 次 推 
送 到 版 本 控制 系统 都 会 运行 测试 。 

隔离 测试 组 件 不 是 测试 应 用 的 唯一 方式 。 实 际 上 , 测试 的 类 型 有 很 多 种 ， 下 一 闻 简 要 讨论 几 
个 重要 的 类 型 。 


8.5 集成 测试 、 外 观测 试 和 性 能 测试 


前 面 我 说 过 多 次 , 测试 有 很 多 不 同类 型 。 例 如 , 集成 测试 用 于 测试 应 用 工作 流程 的 不 同 线路 ， 
确保 组 件 之 间 能 按 预 期 正常 交互 。 我 们 已 经 隔离 测试 了 组 件 ， 不 过 集成 测试 能 多 提供 一 层 保障 ， 
捕获 真正 使 用 应 用 时 可 能 出 现 的 缺陷 。 
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8.5.1 集成 测试 


集成 测试 使 用 的 工具 和 单元 测试 所 使 用 的 没什么 区 别 ， 也 能 使 用 Tape、Sinon 和 Proxyquire。 
二 者 的 区 别 在 于 应 该 测试 什么 。 集成 测试 的 目的 不 是 完全 把 组 件 隔离 起 来 测试 , 而 是 尽量 多 地 测 
试 组 件 之 间 的 相互 联系 , 其 他 的 则 通过 模拟 技术 实现 。 例如 , 可 能 会 启动 运行 应 用 的 Web 服 务 器 ， 
发 起 真实 的 HTTP 请 求 ， 检 查 响应 是 否 和 预期 的 一 致 。 

我 们 还 可 以 使 用 浏览 器 自动 化 工具 Selenium 在 客户 端 进 行 全 面 测试 Selenium 通 过 API 在 Web 
服务 器 和 浏览 器 之 间 通 信 ， 而 且 很 多 语言 都 支持 它 的 API。 我 们 可 以 通过 Selenium 服 务 器 向 浏览 
器 发 出 命令 ， 也 可 以 在 测试 中 编写 一 系列 操作 步骤，Selenium 会 启动 浏览 器 执行 这 些 操作 。 一 个 
运行 着 的 Web 服 务 器 和 浏览 器 自动 化 结合 在 一 起 就 可 以 自动 运行 原本 可 能 会 手动 运行 的 测试 。 记 
住 , 我 们 只 需 编写 一 次 测试 ， 以 后 想 运 行 多 少 次 就 能 运行 多 少 次 ， 而 且 随 时 可 以 修改 它 。 不 过 我 
得 承认 ，Selenium 的 设置 很 麻烦 ， 通 常会 仿 人 泪 形 ， 而 且 文 档 苇 乏 。 然 而 一 且 写 好 了 集成 测试 ， 
我 们 就 能 从 中 受益 。 

使 用 Selenium 这 样 的 工具 ,我 们 不 仅 能 在 浏览 器 中 自动 运行 集成 测试 ， 还 能 单独 在 后 端 或 前 


ALL \ 一 一 | 


端 运 行 这 些 测试 。 
















































































8.5.2 外观 测试 


外 观测 试 通常 指 在 不 同 尺寸 的 视 区 中 截图 应 用 的 界面 ,以 验证 布局 没 变 混 乱 。 验证 时 可 以 把 
截图 和 预期 效果 图 进行 对 比 ， 也 可 以 把 最 新 截图 琶 加 在 之 前 的 截图 上 ,观察 差异 。 通 过 差异 能 快 
速 识 别 出 版 本 之 间 的 变动 ,而 没有 变化 的 部 分 则 会 被 遮盖 。 很 多 Grunt 搬 件 都 能 截图 应 用 的 界面 ， 
有 些 甚 至 还 能 对 比 最 新 的 截图 和 之 前 的 截图 ， 告诉 你 哪些 地 方 变 了 。grunt-photobox 就 是 这 样 
一 个 插件 。 这 个 插件 的 配置 很 简单 ， 只 需 指 定 要 加 载 的 URL 和 截图 时 视 区 的 分 辨 率 即 可 。 如 果 遵 
守 响 应 式 Web 设 计 范 式 ， 这 样 做 会 特别 有 用 。 响 应 式 Web 设 计 是 指 根据 视 区 的 尺寸 和 其 他 因素 ， 
通过 CSS 媒 体 查 询 来 改变 页 面 的 外 观 。 下 列 代 码 片 段 中 的 grunt -photopbox 配 置 ， 以 三 种 尺寸 对 
页 面 进行 截图 。 各 选项 的 说 明 详 述 如 下 。 

口 urls 字 上 段 是 一 个 数组 ， 指 定 要 截图 的 页 面 网址。 

口 screensizes 字 段 定义 每 个 截图 的 宽度 ; 截图 的 高 度 是 整个 页 面 的 高 度 。 设 置 时 要 使 用 
字符 串 。 注 意 ，Photobox 会 使 用 指定 的 每 个 分 辩 率 为 前 面 设 定 的 每 个 网 址 截图 。 
photobox: { 

buildfirst: { 

options: { 

urls: ['http://bevacqua.io/bf'], 

screenSizes: ['320'，'960'，'1440'] // 宽度 必须 使 用 字符 串 表 示 
} 


} 
} 


在 Grunt 中 配置 好 Photobox 并 执行 下 列 命令 后 ,Photobox 会 生成 一 个 网 址 。 我 们 可 以 打开 这 个 
网 址 ， 对 比 各 个 截图 。 
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grunt photobox:buildfirst 








本 书 配套 源码 的 ch08/10_visual-testing 文 件 夹 中 有 完 
生 能 测试 上 。 


性 能 测试 





一 





8.5.3 


整 可 用 的 示例 。 最后, 我 们 把 注意 力 转 到 





密切 关注 应 用 的 性 能 有 利于 快速 找 出 性 能 问题 的 根本 原因 。 我 们 可 以 使 用 Google PageSpeed 
或 Yahoo YSlow 等 工具 监控 Web 应 用 的 性 能 。 这 两 个 工具 使 用 类 似 的 方式 分 析 应 用 ， 而 且 都 可 以 
使 用 Grunt 持 件 实 现 自动 化 。 不 过 这 两 个 插件 提供 的 服务 有 些 不 同 : PageSpeed 的 Grunt 插 件 更 关注 








网 站 有 哪些 地 方 应 该 改进 ， 例如， 如 果 没 有 主动 缓存 静态 资源 ，PageSpeed 会 提醒 你 ; 





会 告诉 你 发 起 了 多 少 请 求 ， 页 





插件 提供 的 信息 更 简洁 ， 
以 及 性 能 得 分 。 











而 YSlow 
面 加 载 用 了 多 长 时 间 ， 下 载 了 7 多少 内 容 ， 





PageSpeed 插 件 grunt -pagespeed 需 要 使 用 谷歌 提供 的 API 密 钥 。“ 有 了 API 密 钥 后 ， 可 以 像 





代码 清单 8.36 ( 在 本 书 配 套 源码 的 ch08/11_pagespeed-ins 





ights 文 件 夹 中 ) 那样 配置 这 个 插件 。 在 配 








置 中 , 我 们 要 告诉 PageSpeed 访 问 哪个 URL, 生成 的 结果 但 


用 什么 语种 ,使 用 什么 策略 (' desktop' 


或 'mobile' )， 还 要 设置 最 少 得 分 ( 满分 100 ) 为 多 少时 代表 测试 成 功 。 注 意 ， 我 们 有 意 没 在 
Gruntfilejs 文 件 中 写 人 API 密 钥 ， 为 的 是 保证 机 密 信 息 的 安全 。 我 们 可 以 从 环境 变量 中 获取 这 个 


密 钥 。 
代码 清单 8.36 ”配置 PageSpeed 搬 件 


pagespeed: { 
desktop: { 
url: 'http://bevacqua.io/bf', 
locale: 'en_US', 
strategy: 'desktop', 
threshold: 80 
5 
options: { 
key: process.env.PAGESPEED_ KEY 
} 
} 





若 想 运行 这 个 任务 ， 我 们 需要 从 谷歌 获取 密 钥 ， 然 后 在 终端 执行 下 列 命令 : 
PAGESPEED_KEY=SYOUR_API_KEY grunt pagespeed:desktop 


把 机 密 信息 保存 在 环境 变量 中 的 原因 ， 详 见 第 3 章 的 3.2 他 。 








YSlow 的 Grunt 插 件 grunt -yslow 无 需 任何 API 密 钥 ， 因 此 配置 十 分 简单 。 我 们 要 做 的 就 是 











在 这 个 插件 的 配置 中 指定 要 访问 的 URL, 以 及 设 定 页 面 权 重 、 页 面 加 载 速度 、 性 能 得 分 ( 满分 100 ) 














和 请 求 数量 的 浆 值 ， 如 下 列 代码 清单 所 示 在 本 书 配套 源码 的 ch08/12_yahoo-yslow 文 件 夹 中 )。 











人 访问 https:Wcode.google.com/apis/console 获 取 API 密 钥 。 
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代码 清单 8.37 配置 YSlow 插 件 


yslow: { 
options: { 
thresholds: { 
weight: 1000, 
speed: 5000, 
score: 80, 
requests: 30 
} 
} 
buildfirst: { 
files: [ 
{ src: 'http://bevacqua.io/bf' } 
] 
} 
} 


若 想 运行 这 些 YSlow 测 试 ， 需 要 在 终端 执行 下 列 命令 : 
grunt yslow:buildfirst 


本 章 所 有 示例 在 本 书 的 配套 源码 中 都 有 ， 详 见 ch08 文 件 来， 请 务必 看 一 下 1! 


8.6 总 结 


本 章 涵 盖 了 很 多 知识 ， 归 纳 起 来 有 以 下 几 点 。 
口 简单 介绍 了 单元 测试 ， 学 习 了 如 何 调整 组 件 ， 以 便于 测试 。 
口 说 明了 如 何 使 用 Tape 在 客户 端 和 服务 器 端 无 缝 运行 测试 ， 而 且 无 需 重 复 代码 。 
口 学 习 了 驭 件 、 侦 件 和 代理 , 为 什么 要 使 用 这 些 技术 ,以 及 如 何在 JavaSceript 代 码 中 使 用 它们 。 
口 分 析 了 几 个 案例 ， 告 诉 你 应 该 测试 什么 以 及 应 该 如 何 测试 。 
口 学 习 了 如 何在 命令 行 中 使 用 Grunt 在 服务 器 和 浏览 器 中 运行 Tape 测 试 。 
口 介绍 了 集成 测试 和 外 观测 试 ， 学 习 了 如 何 使 用 Grunt 自 动 运行 这 些 测试 。 
如 果 你 想 进一步 学 习 测试 ， 我 建议 你 阅读 Christian Johansen 所 著 7Test-Driven JavaScript Development 
( Developer’s Library, 2010 )。 
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来 构 








本 章 内 容 

口 API 架 构 设 计 

口 理解 REST 约 束 模型 

口 学 习 API 分 页 、 缓 存 和 限 流 方案 
口 为 API 编 写 文档 的 方法 

口 开发 分 层 服 务 架构 

口 在 客户 端 使 用 REST API 




















前 面 我 已 经 说 明了 如 何 制 定 构建 过 程 , 讲解 了 如 何 部 署 和 配置 应 用 所 在 的 不 同 环境 。 我 们 还 
学 习 了 模块 化 、 依 赖 管理 和 JavaScript 中 的 异步 代码 流程 ， 以 及 用 于 开发 可 伸缩 应 用 的 MVC 架 构 。 
本 书 最 后 一 章 主要 介绍 REST API 架 构 设 计 ， 以 及 如 何在 客户 端 使 用 简洁 易 懂 的 REST API 把 前 端 
和 后 端 数据 持久 层 联系 起 来 。 


9.1 规避 API 设计 误区 


如 果 你 曾 为 大 型 企业 处 理 过 Web 项 目的 前 端 ， 我 相信 你 一 定 遇 到 过 后 端 API 缺 少 关联 性 的 问 
题 。 例 如 ， 如 果 想 获取 商品 分 类 列表 ， 要 通过 AJAX 请 求 CET /categories; 如 果 想 获取 某 个 分 
类 中 的 商品 ， 要 使 用 GET /getProductListFromCategory?category_id=id; 如 果 想 获取 同 
时 属于 多 个 分 类 的 商品 ， 要 使 用 cET /productIinCategories?values=iqd 1,id 2,...iqd_n; 
如 果 想 保存 商品 的 描述 ， 要 使 用 PosT /product ， 在 请 求 主体 中 添加 大 量 JSON 数 据 ， 再 次 发 送 
商品 的 所 有 信息 ; 如 果 想 给 用 户 发 送 定制 的 电子 邮件 ， 要 使 用 PosT /email-customer， 并 指 
定 电子 邮件 地 址 和 邮件 内 容 。 

如 果 你 没有 发 现 这 样 设计 的 API 有 什么 问题 ， 可 能 是 你 已 经 习惯 了 使 用 这 种 API。 下 面 详细 
列 出 了 这 种 设计 的 问题 。 

口 不 同 的 请 求 方法 使 用 不 同 的 命名 约定 : 有 的 端点 重复 了 GET 方 法 ， 有 的 端点 使 用 驼峰 式 ， 
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有 的 使 用 连 字 符 ， 有 的 使 用 下 划 线 。 总 之 ， 各 种 命名 方式 都 有 。 
口 除了 命名 约定 之 外 ， 端 点 也 没有 使 用 任何 其 他 方式 将 其 和 泻 染 视 图 的 端点 区 分 开 。 
口 指定 参数 的 方式 也 有 较 大 差异 , 没有 明确 区 分 查询 参数 和 请 求 主体 。 或许 cookie 能 解决 这 
个 问题 。 
口 不 确定 何 时 该 使 用 什么 HTTP 方 法 (HEAD、GET、POST、PUT、PATCH 或 DELETE )， 结 果 
只 使 用 了 GT 和 PosT。 
口 API 不 一 致 。 设 计 良 好 的 API 不 仅 要 有 好 的 文档 ， 而 且 整 体 还 要 一 致 ， 让 使 用 者 能 轻松 使 
用 ， 让 开发 人 员 能 根据 现 有 API 继 续 实现 其 他 API。 

这 种 API 不 仅 混用 了 命名 和 传递 参数 的 约定 方式 ， 还 忽视 了 标准 和 API 端 点 的 关联 性 。API 之 
所 以 变 成 这 样 ， 最 可 能 的 原因 是 经 常 调动 项 目 中 维护 API 的 人 员 。 不 过 也 有 可 能 始终 是 一 个 人 ， 
但 这 个 人 对 API 的 设计 不 够 了 解 。 就 算是 这 样 ， 至 少 也 要 在 某 种 程度 上 保持 API 的 一 致 性 。 如 果 
API 设 计 良 好 ,使 用 者 用 过 几 个 端点 之 后 就 能 推断 出 相关 端点 的 用 法 ， 因 为 在 设计 良好 的 API 中 ， 
端点 的 命名 方式 是 一 致 的 ， 使 用 的 参数 类 似 ， 而 且 参 数 的 命名 方式 和 顺序 也 是 一 致 的 。 如 果 API 
设计 得 拙劣 ， 或 者 没有 遵守 一 致 性 方针 ， 那 么 使 用 API 时 就 很 难 作 出 这 种 推断 。 只 有 设计 一 致 的 
API 才 能 轻易 作出 推断 。 

本 章 会 教 你 如 何 设计 连贯 一 致 且 具有 关联 性 的 API， 便 于 在 Web 项 目 等 场合 直接 使 用 。 前 端 
使 用 的 API 应 该 设计 得 更 好 ， 但 是 在 前 端 开 发 中 ，API 设 计 和 JavaScript 测 试 却 往往 会 被 低估 。 

REST 是 Representational State Transfer ( 表现 层 状态 转化 ) 的 简称 ， 是 一 套 全 面 的 API 设 计 指 
导 方 针 。 我 们 先 来 学 习 REST， 理 解 之 后 再 说 明 如 何 设计 与 之 相配 的 标准 的 分 层 服 务 。 最 后 ， 我 
们 会 编写 一 些 客户 端 代码 ， 以 与 REST API 交 互 ， 处 理 从 API 获 取 的 响应 。 开 始 学 习 吧 !1 


9.2 学 习 REST API 设计 


REST 是 一 套 架 构 约 束 ,用 于 辅助 开发 通过 HTTP 使 用 的 API。 假 设 开始 开发 Web API 时 采用 “ 怎 
么 都 行 ”的 方式 ,然后 一 点 点 添加 REST 约 束 ， 最 后 会 得 到 符合 标准 的 API， 那么 大 多 数 开发 者 用 
起 它 来 都 会 觉得 舒服 。 注 意 ，REST API 有 多 种 不 同 的 设计 方式 ， 本 章 会 说 明 几 个 我 所 使 用 的 方 
式 。 我 认为 这 些 方式 很 好 ， 但 这 毕竟 只 是 我 的 个 人 观点 。 

Roy Fielding 在 他 的 一 篇 论文 "中 首次 提出 了 REST 架 构 。 自 2000 年 发 表 这 篇 论文 之 后 ， 越 来 
越 多 的 人 开始 使 用 这 个 架构 。 我 们 的 目的 是 开发 一 个 专门 的 REST API， 以 供应 用 的 前 端 使 用 ， 
因此 我 只 会 介绍 和 这 个 目的 相关 的 REST 架 构 约 束 ,例如 如 何 构造 API 的 端点 、 如 何 处 理 请 求 ， 以 
及 应 该 使 用 哪个 状态 码 。 随 后 我 们 还 会 讨论 更 高 级 的 HTTP 通信 话题 ， 例 如 分 页 显示 结果 、 缓 存 
响应 和 限 流 请 求 。 

我 们 会 遇 到 的 第 一 个 约束 是 REST 无 状态 。 这 意味 着 请 求 中 要 有 足够 的 信息 ， 让 后 端 知道 你 
想 做 什么 , 而 且 服 务 器 不 能 使 用 存储 在 自身 中 的 任何 其 他 上 下 文 。 也 就 是 说 , 端点 的 输出 (响应 ) 




























































































































































































QD Roy Thomas Fielding。 Architectural Styles and the Design of Network-Based Software Architectures, Doctoral dissertation ， 
UC Irvine, 2000。 http://bevacqua.io/bf/rest。 





图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 





224 第 9 章 RESTAPI 设 计 和 分 层 服务 架构 











只 由 输入 (请 求 ) 决定 。 

我 们 要 知道 的 另 一 个 约束 是 , REST 架 构 要 求 使 用 统一 的 接口 。API 中 的 每 个 端点 都 要 求 传人 
参数 , 查询 数据 持久 层 之 后 使 用 可 预知 的 特定 方式 返回 响应 。 为 了 详细 理解 这 个 约束 ,我 们 要 知 
道 REST 架 构 处 理 资 源 的 方式 。 


























REST 资 源 
在 REST 架 构 中 ,资源 是 一 切 信 息 的 抽象 。 这 里 ,我们 可 以 把 资源 理解 成 数据 库 中 的 模型 。 
用 户 是 资源 ， 商 品 和 分 类 也 是 资源 。 资 源 可 以 使 用 前 面 说 的 统一 接口 查询 。 


下 面 我 们 具体 说 明 这 对 前 端 API 开 发 来 说 意味 着 什么 。 


9.2.1 端点 、HTTP 方 法 和 版 本 


你 是 否 使 用 过 觉得 设计 得 很 好 的 API? 是 否 立 即 就 能 明白 它 的 作用 ， 能 猜 出 API 中 方法 的 名 
称 ， 而 且 这 些 方法 的 功能 和 预期 一 样 ， 不 会 让 人 意外 ?我 能 想到 好 几 个 设计 良好 的 API， 首 先 浮 
现在 脑海 中 的 是 Ruby 标 准 库 的 API。 这 些 方法 的 名 称 明确 表明 了 其 作用 , 接受 的 参数 具有 一 致 性 ， 
而 且 有 对 应 的 方法 ， 执 行 相 反 的 操作 。 

Ruby 中 的 String 类 有 个 .capitalize 方 法 ,作用 是 把 字符 串 的 首 字母 变 成 大 写 ， 然 后 返回 
一 个 新 字符 串 。string 类 还 有 个 .capitalizel! 方 法 ， 这 个 方法 直接 把 原 字 符 串 的 首 字母 变 成 
大 写 , 但 不 会 创建 副本 。String 类 还 有 个 . strip 方法 ,作用 是 把 两 端的 空白 删除 ， 然 后 返回 一 
个 新 字符 串 。 你 可 能 猪 到 了 ，string 类 还 有 个 .strip! 方 法 ,作用 和 .strip 类 似 , 但 只 处 理 原 
字符 串 ， 不 会 创建 副本 。 

Facebook 也 有 很 好 的 例子 。 它 的 Graph REST API 易 于 使 用 ， 而 且 端 点 的 用 法 基本 一 致 。 我 们 
还 可 以 修改 URL 中 的 不 同 部 分 ， 查 看 Facebook 网 站 中 的 不 同 页 面 ， 例 如 http://facebook.com/me 是 
自己 的 资料 页 面 ， 因 为 Facebook 的 API 会 把 me 识别 为 当前 认证 的 用 户 。 

这 种 一 致 的 行为 是 设计 良好 的 API 的 关键 。 而 设计 不 好 的 API 容 易 让 人 困惑 ， 其 特点 是 缺少 命 
名 约定 ， 文 要 有 层 义 或 不 完善 ， 更 糟糕 的 是 没有 说 明 副 作用 。PHP 的 API 是 出 了 名 的 差 ， 因 为 PHP 
缺少 规范 ， 而 且 PHP 语 言 API 的 不 同 部 分 由 不 同 的 人 负责 开发 ， 从 而 导致 PHP 函 数 的 签名 、 名 称 其 
至 是 大 小 写 都 有 巨大 差异 , 根本 无 法 猜 出 某 个 函数 的 名 称 。 这 种 问题 有 时 可 以 通过 使 用 一 致 的 方式 
包装 现 有 的 API 来 解决 ,这 也 是 jQuery 流行 的 主要 原因 之 一 , 即 用 更 适当 旦 一 致 的 API 抽 象 DOM API。 

设计 API 最 重要 的 一 点 是 保持 一 致 性 , 而 且 从 端点 的 名 称 开 始 就 要 使 用 一 致 的 命名 约定 方式 。 

1. 端点 的 名 称 

首先 , 我 们 要 为 所 有 API 端 点 指定 一 个 前 缀 。 使 用 二 级 域名 作 前 缀 也 行 , 例如 api .example. 
com。 对 前 端 API 来 说 ， 前 级 可 以 使 用 example .com/api。 使 用 前 级 有 助 于 区 分 API 端 点 和 视图 
路 由 ， 而 且 还 能 设 定 预期 的 API 响 应 格式 〈 在 现代 Web 应 用 中 一 般 都 是 JSON 格 式 )。 

不 过 ， 只 设 定 前 级 还 不 够 。API 的 一 致 性 主要 体现 在 端点 的 名 称 上 ， 因 此 要 严格 遵守 特定 的 
命名 方式 。 命 名 端点 时 可 以 参考 下 列 指导 方针 。 
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口 全 部 小 写 , 使 用 连 字 符 , 例如 /api/verification-tokens。 这 种 命名 方式 能 提升 URL 
的 “可 编程 性 ”， 即 便于 手动 修改 URL。 你 可 以 使 用 任何 命名 方式 ， 只 要 自始至终 保持 一 
致 就 行 。 

口 使 用 一 个 或 两 个 名 词 描述 资源 ， 例 如 verification-tokens、 users 或 products。 

口 资源 一 定 要 使 用 复数 : 要 使 用 /api /users, 不 能 使 用 /api/user。 稍 后 我 们 会 看 到 ， 这 
样 做 能 让 API 更 具 语义 。 

在 这 些 方针 的 指导 下 ， 下 面 我 们 以 /api /products 为 例 说 明 如 何 使 用 REST 架 构 设计 一 致 的 

API。 

2. HTTP 方 法 和 CRUD 操 作 的 对 应 关系 
或 许 , 我 们 使 用 商品 API 最 常 执行 的 任务 是 获取 一 系列 商品 。/api/prodqucts 端 点 主要 用 于 

处 理 这 个 任务 ， 所 以 你 在 服务 器 上 实现 一 个 路 由 ， 以 JSON 格 式 返 回 一 系列 商品 ， 并 且 自 我 感觉 良 

好 。 当 用 户 访问 商品 详细 信息 页 面 时 ， 要 返回 单个 商品 ， 此 时 ， 你 可 能 想 把 端点 定义 成 /apiy/ 

progduct/:id, 不 过 根据 始终 要 使 用 复数 的 指导 方针 , 这 个 端点 应 该 定义 成 /api/products/:id。 

这 两 个 端点 要 使 用 的 请 求 方法 都 很 明确 。 因 为 它们 和 服务 器 交互 时 只 需 读 取 数据 , 所 以 要 使 

用 GT 请 求 。 那 么 删除 商品 应 该 怎么 做 呢 ? 非 REST 接 口 一 般 会 使 用 PosT /removeProduct? 

id=:ida， 有 时 还 会 使 用 GET 方 法 ， 可 是 这 样 做 谷歌 等 Web 疏 虫 会 朴 取 链接 ， 销 毁 数据 库 中 的 重要 

信息 。 "REST 架 构建 议 使 用 DELETE 方 法 ， 而 且 端 点 和 获取 单个 商品 的 端点 一 样 ， 即 

/api/products/:idq。 合 理 利 用 HTTP 方 法 能 构建 更 具 语义 、 更 一 致 的 API。 

把 条 目 插 入 指定 类 型 的 资源 时 也 要 经 过 类 似 的 思考 过 程 。 如 果 不 使 用 REST 架 构 ， 可 能 会 在 

请 求 主 体 中 包含 相关 的 数据 ， 然 后 发 起 POST /createProdauct 请 求 。 但 在 REST 架 构 中 应 该 使 

用 更 具 语义 的 PUT 方法 ,而 且 要 使 用 一 致 的 /api/prodqucts 端 点 。 最 后 ， 编 辑 时 应 该 使 用 PATCH 

方法 , 端点 应 该 是 /api/products/:id。POST 方 法 用 于 处 理 不 涉及 创建 或 更 新 数据 库 对 象 的 操 

作 ， 例 如 发 送 电子 邮件 的 /notifysubscribers 端 点 。 处 理 关 联 关 系 的 端点 也 可 以 看 作 基 本 存 

储 操作 ( 创建 一 读 取 一 更 新 一 删除 ， 简 称 CRUD ) 的 一 部 分 。 根 据 目 前 我 所 说 的 ， 你 应 该 不 难看 

出 ，GET /api/products/:id/parts 请 求 得 到 的 响应 是 组 成 某 个 商品 的 各 个 部 件 。 

对 CRUD 操 作 来 说 ， 我 们 就 讲 这 么 多 。 但 如 果 想 处 理 CRUD 之 外 的 操作 应 该 怎么 做 呢 ?” 发 挥 

你 的 想象 力 吧 ! 通常 ,我们 可 以 使 用 posT 方 法 ,而且 应 该 把 要 处 理 的 对 象 视 作 一 种 资源 。 记 住 ， 

资源 不 一 定 非得 是 数据 库 模 型 引用 。 例 如 ， 可 以 在 前 端 使 用 PosT /api/authentication/ 

login 处 理 登 录 请 求 。 
表 9-1 总 结 了 典型 的 REST API 设 计 方式 是 如 何 使 用 HTTP 方 法 和 端点 的 。 为 了 行文 简洁 , 我 省 

略 了 前 缀 /api。 注意 , 为 了 便于 理解 ,我 以 progducts 资 源 为 例 。 其实 这 种 设计 方式 可 以 应 用 于 任 

何 资源 类 型 。 
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GD 有 个 类 似 的 事件 : 谷歌 把 一 个 网 站 的 内 容 清 空 了 。 想 了 解 这 个 事件 的 详情 ， 请 访问 http://bevacqua.io/bf/spider。 
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表 9-1 典型 REST API 中 商品 的 端点 






































方 法 端点 说 明 

GET /products 获取 一 系列 商品 

GET /products/:id 通过 ID 获取 单个 商品 

GET /products/:id/parts 获取 单个 商品 的 各 个 部 件 

PUT /products/:id/parts 为 某 个 商品 添加 一 个 新 部 件 

DELETE /products/:id 删除 指定 ID 对 应 的 商品 

PUT /products 添加 一 个 新 商品 

HEAD /products/ :id 通过 状态 码 (200 或 404) 判断 商品 是 否 存在 
PATCH /proquctsy/ :id 编辑 指定 ID 对 应 的 现 有 商品 

POST /authentication/login 多 数 其 他 端点 应 该 使 用 POST 方法 






































注意 ， 每 种 操作 使 用 的 HTTP 方法 并 不 是 一 成 不 变 的 。 事 实 上 ， 关 于 该 使 用 哪个 方法 仍 存在 
着 激烈 的 争论 ， 有 人 认为 插入 和 其 他 非 寡 等 的 操作 应 该 使 用 PosT 方 法 ， 而 使 用 其 他 方法 (GET、 
PUT、PATCH 和 DELETE ) 的 端点 必须 执行 窜 等 操作 ， 即 多 次 请 求 这 些 端点 也 不 应 该 改变 结果 。 

版 本 也 是 REST API 设 计 的 一 个 重要 方面 ， 不 过 有 必要 在 前 端 操 作 中 使 用 吗 ? 

3. API 的 版 本 

在 传统 的 API 应 用 场合 中 ， 版 本 是 有 用 的 ， 因 为 服务 的 重大 变动 不 会 影响 现 有 用 户 。 关 于 在 
RESTAPI 中 如 何 区 分 版 本 ， 存 在 两 种 主流 的 观点 。 

一 种 观点 认为 ，API 的 版 本 应 该 在 HTTP 首 部 中 设 定 , 如 果 请 求 中 没有 指定 版 本 , 应 该 使 用 最 
新 版 的 API 响 应 。 这 个 正式 的 方法 比较 符合 REST 架 构 的 提议 。 不 过 有 人 认为 ， 如 果 API 设 计 得 不 
好 ， 偶 尔 可 能 会 引入 重大 变动 。 

因此 ， 这些 人 建议 在 API 端 点 的 前 级 中 设 定 版 本 ,例如 /api/v1/...。 阁 使 用 这 种 方法 ， 查 
看 请 求 的 端点 就 能 确认 应 用 使 用 的 API 版 本 。 
事实 上 , 无 论 在 端点 中 使 用 vi 还 是 在 请 求 首部 中 设 定 版 本 , API 的 实现 方式 都 没有 太 大 差异 ， 
因此 具体 使 用 哪 种 方法 基本 上 是 由 实现 者 的 喜好 决定 的 。 对 Web 应 用 和 相应 的 API 来 说 ， 没 必要 
实现 任何 版 本 机 制 , 所 以 我 倾向 于 使 用 请 求 首部 。 这样 , 如 果 以 后 需要 区 分 版 本 也 很 容易 , 把 “最 
新 版 ” 设 为 默认 版 本 就 行 了 。 如 果 使 用 者 仍 想 使 用 之 前 的 版 本 ,可 以 在 首部 中 明确 指定 之 前 的 版 
本 号 。 话 虽 如 此 ， 不 过 最 好 还 是 明确 指定 要 使 用 的 API 版 本 ， 不 能 盲目 地 使 用 最 新 版 API， 以 防 
功能 意外 失效 。 

刚才 我 提 到 ， 不 一 定 非得 在 前 端 使 用 的 RESTAPI 中 加 入 版 本 ， 但 还 是 要 考虑 两 个 因素 。 

口 API 是 否 公 开 ? 如 果 公 开 ， 就 有 必要 使 用 版 本 ， 让 使 用 者 能 更 清楚 地 预测 服务 的 行为 。 
口 API 是 否 要 供 多 个 应 用 使 用 ? API 和 前 端 是 否 由 不 同 的 团队 开发 ? 修改 API 端 点 的 过 程 是 
否 很 漫长 ”如 果 这 三 个 问题 的 答案 有 一 个 是 肯定 的 ,或许 最 好 在 API 中 加 入 版 本 。 
除非 团队 和 应 用 非常 小 , 应 用 和 API 放 在 同一 个 仓库 中 , 而 且 开 发 者 不 区 别 对待 二 者 , 否则 ， 
保险 起 见 ， 应 该 在 API 中 使 用 版 本 。 
下 面 来 学 习 什 么 是 请 求 和 响应 。 
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9.2.2 请求、 响应 和 状态 码 


前 面 我 说 过 , 始终 遵守 REST 架 构 的 约定 是 开发 高 可 用 性 API 的 关键 。 这 一 点 对 请 求 和 响应 也 
成 立 。API 应 该 使 用 统一 的 方式 获取 参数 ， 例 如 ID 通常 从 端点 中 获取 。 通 过 ID 获取 商品 的 端点 是 
/api/products/:id, 如 果 请 求 的 URL 是 /api/products/bad0-bab8, 那么 bad0-bab8 就 是 
被 请 求 资源 的 标识 符 。 

1. 请 求 

现代 的 Web 路 由 器 都 能 解析 URL,， 还 能 提供 指定 的 请 求 参数 。 例 如 ,下列 代码 展示 了 Express 
(一 种 Node.js Web 框 架 ) 定义 动态 路 由 的 方式 。 这 个 路 由 能 捕获 对 特定 标识 符 对 应 商品 的 请 求 ， 
然后 解析 请 求 的 URL， 把 解析 好 的 参数 交 给 你 处 理 : 


app.get('/api/products/:id'，function (req, res, next) { 
// req.params.id 是 提取 出 来 的 ID 



















































































在 端点 中 包含 标识 符 的 做 法 很 好 ， 这 样 DELETE 和 GET 请 求 能 使 用 同一 个 端点 了 ， 而 且 API 会 
更 直观 ， 就 像 我 前 面 提 到 的 Ruby API。 发 送 PUT、PATCH 或 POST 请 求 修改 服务 器 中 的 资源 时 ， 要 
使 用 统一 的 数据 传送 方式 ， 把 数据 上 传 到 服务 器 。 现 今 ,传输 数据 时 几乎 都 选择 使 用 JSON 格 式 ， 
因为 ISON 很 简单 ， 浏 览 器 原生 支持 ， 而 且 大 多 数 服务 器 端 语 言 都 有 解析 JSON 的 库 。 

2. 响应 

响应 和 请 求 一 样 ， 也 要 使 用 统一 的 数据 传送 方式 ， 这样 解 析 响 应 时 就 不 会 出 现 意 外 情况 。 就 
算 服务 器 端 出 错 了 , 也 要 根据 选 定 的 格式 返回 有 效 的 响应 , 例如 , 如 果 我 们 的 API 使 用 JSON 格 式 ， 
那么 API 生 成 的 所 有 响应 都 应 该 是 有 效 的 JSON( 假设 用 户 在 HTTP 首 部 中 设 定 接 受 JSON 格 式 的 
响应 )。 

我 们 要 决定 把 响应 放 在 什么 信封 (也 叫 消 息 容器 ) 中 。 为 了 让 所 有 API 端 点 提供 一 致 的 体验 ， 
必须 使 用 信封 。 这 样 用 户 能 对 API 生 成 的 啊 应 作 一 些 特定 的 假设 。 信 封 可 以 是 一 个 对 象 ， 其 中 只 
有 一 个 字段 ， 名 为 aata， 这 个 字段 的 值 是 响应 的 主体 : 

{ 


"data": {} // 真正 的 响应 
} 


这 个 对 象 还 可 以 有 error 字 段 , 但 只 在 出 错时 出 现 , 其 值 是 一 个 对 象 , 包含 错误 的 一 些 属性 ， 
例如 错误 消息 、 原 因 和 相应 的 元 数据 ,假设 我 们 使 用 GET /api /products/baeb-b00f 查 询 APT， 
但 是 数据 库 中 没有 ID 为 paeb-pb00f 的 商品 ， 那 么 得 到 的 响应 可 能 会 像 下 面 这 样 




















































































































"error": { 
ToeGde"™: bft=404"., 
"message": "Product not found.", 
"aontext”: “{ 


"id": "baeb-b00Ef" 
; 
: 
} 
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只 使 用 信封 和 恰当 的 error 字 上 段 还 不 够 。 作 为 REST API 的 开发 者 ， 我 们 应 该 意识 到 必须 为 
API 的 响应 设 定 合适 的 状态 码 。 

3. HTTP 状 态 码 

如 果 商 品 不 存在 ， 除 了 使 用 正确 的 格式 描述 错误 之 外 ,还 应 该 把 响应 的 状态 码 设 为 404 Not 
Found。 状 态 码 特别 重要 ， 因 为 API 的 使 用 者 可 以 根据 状态 码 预测 响应 。 如 果 响 应 的 状态 码 是 表 
示 成 功 的 2xx， 则 响应 的 主体 中 应 该 包含 请 求 的 所 有 相关 数据 。 下 面 这 个 例子 是 请 求 存 在 的 商品 
得 到 的 响应 ， 包 含 HTTP 版 本 和 状态 码 。 


HTTP/1.1 200 OK 
{ 














Vdatas:: { 
"id": "baeb-b001", 
"name": "Angry Pirate Plush Toy", 
"description": "Batteries not included.", 
"GE "THI0999".; 
"categories": ["plushies", "kids"] 


} 

} 

除 此 之 外 ， 还 有 表示 客户 端 错误 的 4xx 代 码 。 这 些 代 码 表 示 ， 请 求 失败 的 原因 很 有 可 能 是 客 
户 端 出 错 了 (例如 用 户 没有 正确 认证 )。 遇 到 这 种 情况 时 ， 应 该 使 用 error 字 有 段 描述 请 求 失败 的 
原因 。 例 如， 如 果 尝 试 创建 新 商品 时 ， 因 为 末 通 过 表单 字段 的 验证 而 失败 ,返回 的 响应 可 以 使 用 
400 Bad Request 状 态 码 ， 如 下 列 代 码 清 单 所 示 。 


代码 清单 9.1 描述 错误 
HTTP/1.1 400 Bad Request 
{ 





























"error": { 
"ooger sy "BE=400my 
"message": "Some required fields were invalid.", 
"context": { 
"validation": [ 
"The product name must be 6-20 alphanumeric characters", 
"The price can’'t be negative", 
"At least one product category should be selected" 
] 
} 
于 
} 


还 有 一 类 错误 是 意外 错误 ， 使 用 5xx 状 态 码 表示 ,例如 500 Internal Server Error。 发 
生 这 类 错误 时 ， 应 该 像 4xx 错 误 的 处 理 方式 一 样 ， 告 知 用 户 。 假 设 前 面 那 个 请 求 会 导致 出 错 ， 应 
该 把 响应 的 状态 码 设 为 500， 而 且 要 在 响应 主体 中 放 一 些 数 据 ， 如 下 列 代码 所 示 : 

HTTP/1.1 500 Internal Server Error 

{ 


"error": { 
GE 人 "BLE=500%, 
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"message": "An unexpected error occurred while accessing the database." 
"context": { 
"id": "baeb-b001" 
} 
} 
} 


如 果 其 他 所 有 操作 都 失败 了 , 这 种 错误 通常 相对 容易 捕获 。 捕获 之 后 要 把 响应 的 状态 码 设 为 
500， 并 发 回 一 些 信息 ， 说 明 什 么 地 方 出 错 了 。 

至 此 , 我 们 学 习 了 端点 、 请 求 主体 、 状 态 码 和 响应 主体 。 基 于 种 种 原因 ， 正 确 地 设 定 响应 的 
首部 对 REST API 设 计 来 说 也 很 重要 ， 所 以 值得 一 提 。 


9.2.3 分页、 缓存 和 限 流 


虽然 分 页 、 缓 存 和 限 流 在 小 型 应 用 中 不 是 那么 重要 ， 但 对 于 一 致 的 、 可 用 性 高 的 API 来 说 ， 
却 有 一 定 的 作用 。 通 常 ， 分 页 特别 有 用 ， 因 为 如 果 不 分 页 ，API 会 从 数据 库 中 请 求 大 量 数据 到 客 
户 端 ， 严 重 影 响应 用 的 性 能 。 

1. 分 页 响应 

仍然 以 我 举 的 第 一 个 REST API 端 点 为 例 ， 假 设 我 要 通过 /api/prodqucts 查 询 商品 ， 这 个 端 
点 应 该 返回 多 少 个 商品 呢 ? 全 部 吗 ?” 如 果 有 一 百 个 、 一 千 个 、 一 万 个 或 一 百 万 个 呢 ? 我 们 必须 设 
定 一 个 限制 。 我 们 可 以 为 API 设 定 一 个 默认 的 分 页 限制 ， 同 时 允许 各 个 端点 覆盖 默认 值 。 使 用 者 
可 以 通过 查询 参数 字符 串 ， 在 合理 的 范围 内 选择 不 同 的 限制 数 。 

假设 我 们 设 定 每 次 请 求 返 回 10 个 商品 , 那么 我 们 要 实现 一 种 分 页 机 制 , 让 使 用 者 获取 应 用 中 
其 余 的 商品 。 实 现 分 页 机 制 时 ， 我 们 要 使 用 Link 首 部 。 

如 果 查 询 的 是 商品 的 第 一 页 ， 响 应 中 Link 首 部 的 内 容 应 该 类 似 下 列 代码 : 


Link: <http://example.com/api/products/?p=2>; rel="next", 
<http://example.com/api/products/?p=54>; rel="last" 


注意 , 端点 必须 完整 ,这样 使 用 者 才能 解析 Link 首 部 ， 直 接 查 询 其 他 商品 。rel 属 性 的 作用 
是 描述 当前 请 求 页 面 和 所 链接 页 面 之 间 的 关系 。 
如 果 请 求 第 二 页 ， 即 /api/products/?p=2， 应 该 会 得 到 类 似 的 Link 首 部 ， 不 过 这 一 次 会 
说 明 有 “前 一 页 ”和 “第 一 页 ”: 
Link: <http://example.com/api/products/?p=1>; rel="first", 
<http://example.com/api/products/?p=1>; rel="prev", 


<http://example.com/api/products/?p=3>; rel="next", 
<http://example.com/api/products/?p=54>; rel="]last" 


有 时 数据 流动 太 快 , 传统 的 分 页 方法 不 能 满足 我 们 的 需求 。 例如， 如 果 在 请 求 第 一 页 和 第 二 
页 的 空隙 向 数据 库 中 存 人 了 一 些 记录 , 那么 新 记录 的 插入 会 让 第 二 页 得 到 的 有 些 结果 和 第 一 页 重 
复 。 这 个 问题 有 两 种 解决 方案 。 第 一 种 方案 是 ,不 使 用 页 数 ， 而 是 使 用 标识 符 。 这 样 就 算 插 入 了 
新 记录 ，API 也 能 知道 上 次 查询 到 哪个 记录 了 ， 然 后 根据 上 次 查询 的 范围 把 下 一 页 中 各 个 记录 的 
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标识 符 提供 给 你 。 第 二 种 方案 是 为 使 用 者 提供 令 牌 。 API 通 过 这 个 令 牌 记录 上 次 请 求 到 达 的 位 置 ， 
再 生成 下 一 页 。 

但 有 时 候 在 处 理 大 型 数据 集 时 ， 只 有 分 页 才能 保证 高 效 工 作 , 这 时 候 你 或 许 能 从 缓存 和 限 流 
中 获 益 良 多 。 缓 存 的 效果 可 能 比 限 流 好 ， 那 就 先 讨 论 缓存 。 

2. 缓存 响应 

通常 ， 是 否 缓存 查询 API 得 到 的 结果 由 客户 端 根据 需求 来 决定 。 不 过 ，API 可 以 使 用 不 同 的 
方式 建议 如 何 缓存 响应 。 下 面 简要 介绍 一 下 HTTP 缓 存 和 相关 的 HTTP 首 部 。 

如 果 把 cache-control 首 部 的 值 设 为 pbrivate， 所 有 中 间 设 备 ( 例如 nginx 等 代理 、Varnish 
等 其 他 缓存 层 以 及 各 种 位 于 服务 器 和 客户 端 之 间 的 硬件 ) 都 不 会 缓存 ， 只 有 最 终 的 客户 端 才能 组 
存 响应 。 而 设 为 public 则 人 允许 中 间 设 备 缓存 响应 。 

Expires 首 部 告诉 浏览 器 要 缓存 某 个 资源 ， 并 在 有 效 期 限 过 后 重新 请 求 : 


Cache-Control: private 
Expires: Thu, 3 Jul 2014 18:31:12 GMT 


在 API 的 响应 中 很 难 把 Expires 首 部 的 值 设 为 未 来 的 日 期 ， 因 为 服务 器 中 的 数据 的 变化 可 能 
意味 着 客户 端的 缓存 过 期 了 ,但 客户 端 在 失效 日 期 之 前 无 法 得 知 这 一 点 。Expires 首 部 保守 的 替 
代 方 案 是 使 用 一 种 称 为 “条 件 请 求 ”的 模式 。 

条 件 请 求 可 以 根据 时 间作 判断 ,方法 是 在 响应 中 设 定 Last -MoGified 首 部 。 此 时 最 好 在 
Cache-Control 首 部 中 设 定 max-age 属 性 ， 就 算 修改 日 期 没 变 ， 浏 览 需 也 会 在 一 段 时 间 之 后 把 
缓存 设 为 失效 。 

Cache-Control: private, max-age=86400 

Last-Modified: Thu, 3 Jul 2014 18:31:12 GMT 


浏览 器 下 次 请 求 这 个 资源 时 ， 仅 当 请 求 中 If -Medaifiedq-since 首 部 对 应 的 日 期 之 后 的 资源 
有 变化 时 才 会 下 载 资源 的 内 容 。 
If-Modified-Since: Thu, 3 Jul 2014 18:31:12 GMT 


如 果 在 Thu，3 Jul 2014 18:31:12 GMT 之 后 资源 没有 变化 ， 则 服务 器 返回 的 响应 主体 为 
空 ， 而 且 状 态 码 为 304 Not Modifiegqd。 

Last-Modified 协 商机 制 的 一 种 替代 方案 是 使 用 ETag (表示 Entity Tag， 意 思 是 实体 标签 ) 
首部 ， 这 个 首部 的 值 是 表示 资源 当前 状态 的 哈 希 值 。 服 务 器 使 用 PTag 首 部 来 判断 缓存 的 资源 内 
容 和 最 新 版 是 否 有 差异 : 

Cache-Control: private, max-age=86400 

ETag: "d5aae96d71f99e4ed31f15f0ffffdd64" 


后 续 的 请 求 会 发 送 If-None-Match 首 部 ， 其 值 是 上 次 请 求 这 个 资源 时 ETag 首 部 的 值 : 
If-None-Match: "d5aae96d71if99e4ed31f15f0ffffdd64" 


如 果 当 前 版 本 有 相同 的 ETag 值 ， 则 说 明和 客户 端 中 缓存 的 版 本 一 样 ,服务 器 会 返回 304 Not 
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Modifiedq 响 应 。 除 了 缓存 之 外 ， 请 求 限 流 也 能 减轻 服务 器 的 负载 。 

3. 请 求 限 流 

限 流 也 叫 频率 限制 ， 用 于 限制 一 段 时 间 内 客户 端 能 请 求 API 的 次 数 。 限 制 频 率 的 方式 有 多 
种 ， 不 过 最 常见 的 做 法 是 指定 一 个 固定 的 限制 数 ， 然 后 在 一 段 时 间 之 后 还 原 限 额 。 我 们 还 要 
决定 如 何 实施 这 种 限制 , 例如 可 以 针对 每 个 IP 地 址 作 限 制 。 我 们 可 以 为 认证 用 户 提供 更 宽松 的 
限制 。 

假如 我 们 为 未 认证 用 户 设 定 的 频率 限制 是 每 小 时 2000 次 请 求 ， 那 么 API 应 该 在 响应 中 包含 下 
列 首部 ， 每 请 求 一 次 就 从 剩余 的 限额 中 减 去 一 。X-RateLimit-Reset 首 部 的 值 是 一 个 Unix 时 间 
鹤 ， 代 表 的 是 要 重 置 限额 的 时 间 。 

xX-RateLimit-Limit: 2000 


XxX-RateLimit-Remaining: 1999 
X-RateLimit-Reset: 1404429213925 


请 求 限额 用 完 之 后 ，API 应 该 返回 429 Too Many Requests 响 应 ， 并 在 通常 使 用 的 error 
明 性 中 设置 一 个 有 意义 的 错误 消息 : 


HTTP/1L.1 429 Too Many Requests 
X-RateLimit-Limit: 2000 
xX-RateLimit-Remaining: 0 
X-RateLimit-Reset: 1404429213925 
{ 
















































































UeEEOEY: 
"code": "bf-429", 
"message": "Request quota exceeded. Wait 3 minutes and try again.", 
"context": { 


"renewal": 1404429213925 
} 
} 
} 


内 部 API 或 只 给 前 端 使 用 的 API 往 往 不 需要 这 种 安全 措施 , 但 对 公开 的 API 来 说 ， 这 种 措施 很 
重要 。 限 流 、 分 页 和 缓存 这 三 项 措施 能 减轻 后 端 服务 的 负担 。 
使 用 API 时 如 果 出 现 了 异常 情况 ， 对 于 你 设计 的 高 可 用 性 的 服务 来 说 ， 完 整 的 文档 是 使 用 者 
的 最 后 一 根 救命 稳 草 了 。 下 一 节 说 明正 确 为 API 编 写 文档 的 要 领 。 


9.2.4 ”为 API 编 写 文档 


任何 值得 使 用 的 API， 不 管 是 否 面向 公众 ， 都 要 有 完好 的 文档 。 遇 到 问题 时 ， 如 果 其 他 方式 
无 法 解决 , 使 用 者 会 参考 API 文 档 。 我 们 可 以 根据 代码 基 中 散布 各 处 的 元 数据 (通常 是 代码 注释 ) 
自动 生成 API 的 文档 ， 但 要 确保 文档 是 最 新 的 ， 而 且 要 切 题 。 

好 的 API 文 档 应 该 做 到 以 下 几 点 。 
口 说 明 响应 的 信封 是 什么 样子 。 
口 演示 报告 错误 的 方式 。 
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口 概述 认证 、 分 页 、 限 流 和 缓存 的 工作 方式 。 
口 详细 说 明 每 个 端点 、 查 询 这 些 端点 要 使 用 哪个 HTTP 方 法 、 请 求 中 应 该 包含 的 每 个 数据 ， 
以 及 可 能 出 现在 响应 中 的 各 个 字段 。 

如 果 测 试用 例 中 有 最 新 的 实例 ， 提 供 了 访问 API 的 最 佳 实践 ， 那 么 测试 用 例 有 时 也 可 以 当成 
文档 。 有 了 文档 ， 出 现 问 题 时 ， 客 户 端 的 开发 者 能 快速 排查 ， 因 为 开发 者 可 能 没有 完全 理解 API 
期 望 接收 的 数据 。API 文 档 中 还 应 该 有 更 改 日 志 ， 简 要 说 明 版 本 之 间 的 变化 。 更 改 日 志 的 详细 信 
息 参 阅 4.2.2 节 。 

即便 API 和 Web 应 用 放 在 一 处 , 文档 也 有 用 , 因为 文档 能 减少 在 研究 API 预 期 的 工作 方式 上 花 
费 的 时 间 ， 让 开发 者 不 用 查看 代码 ， 直 接 阅 读 文 档 即 可 。 而 且 ， 如 果 有 人 间 你 关于 API 的 问题 ， 
你 可 以 直接 告诉 他 们 查看 哪个 文档 。 就 这 一 点 而 言 ， 似 乎 只 有 维护 REST API 时 才能 体现 出 文档 
的 优势 ， 不 过 对 任何 服务 、 库 和 框架 来 说 ,文档 都 很 重要 。 库 ( 例如 jQuery ) 的 文档 应 该 涵盖 公 
开 API 中 的 每 个 方法 ， 详 细 且 明确 地 说 明 可 以 使 用 的 参数 和 返回 值 。 有 时 ， 文 档 还 可 以 说 明 底 层 
的 实现 方式 ， 帮 助 使 用 者 理解 为 什么 API 如 此 呈现 。Twitter 、Facebook 、GitHub 和 StackExchange 
的 AP 文档 写 得 都 很 好 。” 

掌握 设计 REST API 所 需 的 知识 后 ， 下 一 节 我 们 来 探讨 如 何 为 API 创 建 所 需 的 各 层 。 这 些 层 用 
于 定义 API， 还 能 模块 化 服务 结构 ， 让 服务 易于 测试 。 


9.3 ”实现 分 层 服务 架构 


如 果 你 的 API 规 模 很 小 ， 而 且 是 专 为 前 端 设计 的 ， 那 么 它 有 可 能 会 和 Web 应 用 放 在 同一 个 项 
目 中 。 此 时 ，API 可 以 和 Web 应 用 的 控制 器 处 于 同一 层 。 

常见 的 做 法 是 让 服务 层 处 理 数据 ， 让 数据 层 负责 和 数据 库 交互 。 同 时 ， 把 API 设 计 成 一 个 薄 
层 ， 架 构 在 其 他 层 之 上 。 这 种 架构 如 图 9-1 所 示 。 

























































































Q@ 这 些 API 文 档 的 地 址 分 别 是 : http://bevacqua.io/bf/api-twitter，http://bevacqua.io/bf/api-fp，http://bevacqua.io/bf/api- 
github， 以 及 http://bevacqua.io/bf/api-stack。 
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人 API 和 视图 控制 器 可 以 放 在 不 同 的 控制 器 层 
视图 控制 器 逻辑 ， 处 理 API 请 求 

O Ap O 

过 滤 输 入 ， 查询 ”一 一 ~ 

一 HTTP 响 应 CN 
服务 层 服务 层 由 模块 化 组 件 组 成 ， 分 
业务 逻辑 方面 别处 理 业务 逻辑 的 一 部 分 

服务 服务 服务 服务 
| 

数据 层 
统一 数据 访问 模型 





接口 











一 般 来 说 ， 数 据 层 使 用 数据 模型 和 服务 层 交 互 


mm || We || Ww | la 


底层 数据 源 
































图 9-1 三 层 服务 架构 概览 
这 幅 图 从 上 到 下 展示 了 API 层 的 各 个 基本 组 成 部 分 。 


9.3.1 路 由 层 


API 层 负责 处 理 限 流 措施 、 分 页 机 制 、 缓 存 首 部 、 解 析 请 求 主体 和 准备 响应 。 不 过 这 些 操作 
都 应 该 在 服务 层 完成 ， 使 用 统一 的 方式 获取 或 修改 数据 ， 原 因 如 下 。 
口 控制 器 生成 响应 之 前 必须 验证 请 求 数据 。 
口 API 要 从 服务 中 获取 组 成 响应 的 各 种 数据 。 
口 服务 的 工作 完成 后 ，API 控 制 需要 为 响应 设 定 正确 的 状态 码 和 相关 的 响应 数据 。 











9.3.2 ”服务 层 
服务 层 可 以 把 所 有 获取 数据 的 工作 交 给 其 他 层 ,也 就 是 数据 层 , 来 完成 。 这 一 层 负责 ; 
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法 直接 从 数据 存储 中 提取 的 数据 。 

口 服务 层 由 多 个 小 型 服务 组 成 ， 每 个 服务 处 理 业务 的 一 部 分 。 

口 服务 层 查询 数据 层 ， 根 据 业务 逻辑 的 规则 作 计 算 ， 还 要 在 模型 层 验 证 请 求 数 据 。 

口 通常 把 CRUD 操 作 交 给 数据 层 人 处理 。 

口 发 送 电子 邮件 等 无 需 访 问 持久 存储 的 任务 用 不 到 数据 存储 ， 因 此 可 以 完全 交 给 服务 层 中 
的 组 件 处 理 。 


9.3.3 数据 层 


数据 层 负责 和 持久 存储 媒介 如 数据 库 、 纯 文件 和 内 存 等 进行 通信 。 这 一 层 的 作用 是 为 所 有 媒 
介 提 供 统 一 的 访问 接口 。 这 样 做 的 目的 是 便于 切换 持久 存储 层 ( 例如 使 用 不 同 的 数据 库 引 擎 或 内 
存 中 的 键 值 对 存储 )， 从 而 便于 测试 。 

口 数据 层 为 底层 的 数据 存储 提供 接口 ， 用 于 访问 其 中 的 数据 。 这 样 做 易于 和 不 同 的 数据 源 
交互 ， 也 便于 换 用 其 他 存储 方式 。 

口 模型 保持 不 变 ， 和 底层 数据 存储 相互 独立 。 模 型 不 在 接口 中 。 

口 底层 数据 模型 不 在 接口 中 ， 这 样 易于 切换 数据 存储 ， 对 数据 层 的 使 用 者 不 会 产生 影响 。 

以 上 概述 有 点 混乱 。 下 面 进一步 说 明 这 种 三 层 架 构 。 注 意 ， 这 种 架构 方式 不 仅 适 用 于 API 设 
计 ， 还 适用 于 传统 的 Web 应 用 。 如 果 其 他 类 型 的 应 用 需要 额外 的 基础 设计 ， 或 许 也 可 以 这 样 做 。 


9.3.4 ”路 由 层 


在 这 种 架构 中 ， 控 制 器 是 公开 展 。 路 由 层 要 定义 应 用 的 各 个 路 由 ， 还 要 负责 解析 请 求 URL 
和 请 求 主体 中 的 参数 。 

在 处 理 请 求 前 ， 可 能 要 确认 客户 端 是 否 超 出 了 人 允许 的 限额 ， 如 果 超 出 了 ， 要 立即 终止 请 求 ， 
返回 合适 的 响应 ， 并 把 状态 码 设 为 429 Too Many Requests。 

我 们 都 知道 , 不 能 信任 用 户 的 输入 , 因此 在 这 一 层 要 主动 验证 和 过 滤 用 户 的 输入 。 解 析 好 请 
求 后 , 要 确保 请 求 提供 的 数据 完全 能 满足 处 理 的 需求 , 不 多 也 不 少 。 确 认 提 供 了 全 部 请 求 字段 后 ， 
要 过 滤 这 些 字 段 ， 确 保 输入 的 值 有 效 。 例 如 ， 如 果 提 供 的 电子 邮件 地 址 无 效 ，API 要 返回 格式 正 
确 的 响应 主体 ， 并 把 状态 码 设 为 400 Bad Request。 

解析 请 求 并 验证 输入 后 , 要 交 给 服务 层 处 理 , 把 请 求 提供 的 输入 转换 成 所 需 的 输出 ( 稍 后 会 
深入 介绍 服务 层 )。 服 务 层 返 回 结 果 后 ,我们 要 最 后 确认 是 否 能 完成 请 求 ， 并 在 响应 中 返回 相应 
的 状态 码 和 数据 。 那 么 ， 服 务 层 到 底 应 该 做 什么 呢 ? 问 得 好 ! 


9.3.5 ”服务 层 


服务 层 也 叫 业 务 逻 辑 层 , 负责 处 理 请 求 , 从 数据 层 获 取 数 据 , 然后 以 一 种 表现 形式 返回 数据 。 
这 一 层 要 验证 业务 规则 ， 因 而 这 不 是 路 由 层 的 职责 。 
例如 ,如 果 用 户 创建 新 商品 时 把 价格 设 为 very expensive 或 -1, 路 由 层 需 要 指出 这 不 是 有 效 的 
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金额 ; 如 果 选 择 的 分 类 是 针对 价格 在 20~150 美 元 之 间 的 商品 的 ， 而 用 户 把 价格 设 为 200 美 元 ,， 那 
么 服务 层 要 指出 无 法 完成 请 求 。 

服务 层 还 要 负责 必要 的 数据 聚合 工作 。 为 了 获取 所 需 的 数据 , 路 由 层 可 能 只 会 请 求 一 次 服务 
层 , 但 是 服务 层 和 数据 层 之 间 可 能 要 进行 多 次 交互 。 例 如 ,在 新 闻 网 站 中 ， 服务 层 可 能 需要 获取 
多 篇 文章 , 然后 交 给 一 个 服务 , 处 理 这 些 文章 的 内 容 , 找 出 共同 点 , 返回 一 组 内 容 有 关联 的 文章 。 
就 这 一 点 而 言 ， 在 这 种 架构 中 ,服务 层 相当 于 事件 的 组 织 者 ， 它 会 查询 并 指挥 其 他 层 ， 让 它 
们 提供 数据 ， 生 成 有 意义 的 响应 。 下 面 我 们 简单 梳理 一 下 数据 层 的 运作 细节 。 


9.3.6 ”数据 层 


在 各 层 中 ， 只 有 数据 层 是 用 来 访问 持久 存储 组 件 ( 可 能 是 数据 库 ) 的 。 这 一 层 的 目标 是 , 不 
管 使 用 哪 种 底层 数据 存储 ,都 要 能 使 用 统一 的 API 访 问 。 如 果 把 数据 持久 存储 在 MongoDB .MySQL 
或 Redis 中 ， 则 数据 层 提 供 的 API 会 隐藏 细节 ,不 限定 于 任何 特定 的 持久 存储 方式 ， 让 服务 层 使 用 
一 致 的 API。 

图 9-2 展 示 了 可 放 在 数据 层 接口 之 后 的 几 种 数据 存储 。 注 意 ， 这 个 接口 没有 只 隐藏 一 种 支持 
的 数据 存储 ， 例 如 ， 可 以 同时 使 用 Redis 和 MySQL。 













































































数据 层 接口 


图 9-2 ”数据 层 接口 和 几 个 底层 数据 存储 


数据 层 通常 很 简单 ， 目 的 是 把 服务 层 和 持久 存储 层 连 接 起 来 。 数 据 层 生成 的 结果 也 要 一 致 ， 
这 样 修改 底层 的 持久 存储 模型 后 才 不 会 真正 影响 得 到 的 结果 。 

在 小 型 项 目 中 , 如 果 应 用 的 持久 存储 模型 不 会 有 重大 变化 , 可 以 把 服务 层 和 数据 层 合 二 为 一 ， 
但 一 般 我 们 不 推荐 这 样 做 。 注意 , 这 两 层 合 并 起 来 容易 ,但 如 果 有 几 十 个 服务 使 用 几 十 个 不 同 的 
数据 模型 ， 事情 就 会 变 得 越 来 越 复 杂 。 因 此 ， 如 果 可 能 ,我 建议 从 一 开始 就 把 这 两 层 分 开 。 

本 章 最 后 一 个 话题 是 说 明 如 何在 客户 端 使 用 这 种 服务 。 


9.4 在 客户 端 使 用 REST API 


在 Web 应 用 的 客户 端 集中 和 REST API 层 交互 时 ， 最 好 在 API 和 应 用 的 核心 之 间 放 一 个 薄 层 ， 
创建 请 求 API 所 需 的 公用 基础 设施 ， 这 样 做 有 以 下 好 处 : 
口 站 在 一 定 高 度 上 概览 应 用 中 的 请 求 ; 
口 可 以 进行 缓存 ， 避 免 额 外 的 请 求 ; 
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口 在 应 用 的 某 个 地 方 统一 处 理 错误 ， 提 供 流 畅 一 致 的 UI 体 验 ; 
口 在 单 页 应 用 中 如 果 浏 览 到 别处 ， 可 以 中 止 挂 起 的 请 求 。 
我 先 说 明 如 何 创 建 这 个 注 层 ， 然 后 再 说 明 具 体 怎么 使 用 REST API。 


9.4.1 请 求 处 理 层 


这 个 薄 层 有 两 种 实现 方式 : 一 种 是 修改 浏览 器 实现 XHR 的 方式 ， 把 应 用 发 起 的 AJAX 请 求 交 
给 修改 后 的 XHR 代 理 处 理 ; 另 一 种 是 创建 一 个 XHR 容 器 ， 用 它 处 理 所 有 AJAX 请 求 。 人 们 通常 认 
为 第 二 种 方式 更 简洁 ， 因 为 这 种 方式 不 会 影响 浏览 器 原本 的 行为 , 而 第 一 种 方式 有 时 会 导致 异常 
行为 。 所 以 ， 人 们 通常 会 基于 这 个 原因 而 选择 创建 XHR 容 器 ， 代 替 原 生 的 API。 

我 开发 Measly 库 时 就 考虑 到 了 这 一 点 。 这 个 库 使 用 的 是 破坏 性 不 高 的 容器 方式 ， 因 为 这 种 方 
式 对 不 知道 Measly 行 为 的 代码 没有 影响 , 而 且 可 以 轻易 地 把 请 求 和 DOM 中 的 不 同 部 分 关联 起 来 。 
Measly 还 能 缓存 ， 也 能 处 理事 件 ， 这 两 个 操作 可 以 在 特定 的 DOM 元 素 上 执行 ， 也 可 以 全 局 执行 。 
下 面 演 示 Measly 的 几 个 关键 特性 。 首 先 , 我 们 要 从 npm 中 安装 这 个 库 。 你 也 可 以 使 用 Bower 安 装 ， 
库 名 相同 。 


npm install --save measly 


安装 好 之 后 , 继续 阅读 下 一 节 , 学 习 如 何 使 用 Measly 来 确保 请 求 不 会 导致 意 想 不 到 的 副作用 。 


9.4.2 ”中 止 旧 请 求 


单 页 Web 应 用 时 下 很 流行 。 在 传统 的 Web 应 用 中 ， 如 果 转 到 了 其 他 页 面 ， 用 户 代理 会 中 止 所 
有 挂 起 的 请 求 。 那 么 在 单 页 应 用 ( Single-Page Application， 简 称 SPA ) 中 情况 如 何 呢 ? 如 果 你 开 
发 的 是 单 页 应 用 ， 你 可 能 希望 用 户 转 到 其 他 页 面 时 ， 挂 起 的 请 求 不 会 破坏 应 用 的 状态 。 

下 面 举 个 例子 ,假设 客户 端 MVC 框 架 会 在 进入 和 离开 视图 时 触发 事件 。 在 这 个 示例 中 ， 我 
们 使 用 Measly 在 视图 容器 元 素 上 创建 一 个 层 ， 并 在 离开 视图 时 中 止 这 个 层 中 的 所 有 请 求 : 

Vview.on('enter', function (container) { 

measly.layer({ context: container }); 
发 
Vview.on('leave', function (container) { 


measly.find(container) .abort (); 


直 沐 祝 

需要 发 起 AJAX 请 求 时 ， 我 们 要 先 找到 这 个 层 。 为 了 方便 查找 ， 你 可 以 保存 这 个 层 的 引用 。 
使 用 Measly 创 建 的 层 发 起 请 求 十 分 简单 。 在 下 列 代 码 中 ， 我 们 发 起 的 是 DELETE /api/ 
products/:id 请 求 ， 使 用 REST API 删 除 ID 对 应 的 商品 : 





























































































































var layer = measly.find(container); 


deleteButton.addEventListener('click', function () { 
layer.delete('/api/products/' + selectedItem.id); 
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只 要 发 起 请 求 ，Measly 就 会 触发 一 系列 事件 ， 并 需要 我 们 对 这 些 事 件 作出 反应 。 例 如 ， 如 果 
想 知 道 请 求 什么 时 候 成 功 , 可 以 使 用 aata 事 件 ; 如 果 想 监听 错误 ,可 以 订阅 error 事 件 。 可 以 在 
以 下 两 个 不 同 的 地 方 监听 错误 。 
口 直接 在 请 求 层 监听 ， 此 时 只 有 该 请 求 出 错时 才 会 收 到 通知 。 
口 在 Measly 创 建 的 层 上 监听 ,在 这 里 可 以 监听 导致 错误 的 任何 请 求 。 

这 两 种 方法 都 有 用 武之 地 。 你 肯定 想 知 道 请 求 是 否 成 功 ,因为 只 有 成 功 了 , 才能 使 用 特定 的 
方式 处 理 响 应 数据 。 

你 或 许 还 需要 全 局 监听 应 用 中 发 生 的 错误 ， 然 后 显示 相应 的 UI 元 素 , 通知 用 户 出 错 了 , 或 者 
把 错误 报告 发 给 日 志 服 务 。 


9.4.3 ”使 用 一 致 的 方式 处 理 AJAX 错 误 


下 列 代码 清单 说 明了 AJAX 请 求 出 错时 如 何在 UI 中 显示 一 个 对 话 框 ， 不 过 它 仅 在 状态 码 为 表 
示 服 务 器 内 部 错误 的 5300 时 才 会 显示 。 对 话 框 中 显示 的 错误 消息 由 响应 提供 ， 片 刻 以 后 ， 它 就 会 
隐藏 起 来 。 


代码 清单 9.2 AJAX 请 求 出 错时 在 UI 中 显示 一 个 对 话 框 




















Var errorDialog = document .querySelector('.error-dialog'); Ne 
measly.on(500, function (err) { duerySelector 是 原生 API， 使 
errorDialog.innerText = err.message; 用 CSS 选 择 符 查找 DOM 元 素 。 

errorDialog.classList.add('error-dialog-open'); EN 

setTimeout (hideErrorDialog, 3000); classList 也 是 原生 APl, 用 于 处 
中 学 理 找 到 的 DOM 元 素 的 CSS 类 。 
function hideErrorDialog () { 


errorDialog.classList.remove('error-dialog-open'); 


4 
说 实话 ， 这 种 处 理 方式 相当 无 趣 ， 而 且 不 使 用 库 也 能 实现 。Measly 在 处 理 上 下 文中 的 验证 时 
更 有 用 。 进 行 这 种 验证 时 要 小 心 400 Bag Request 响 应 ， 这 个 状态 码 表示 API 中 的 验证 失败 了 。 
Measly 会 把 事件 句柄 中 的 this 设 为 请 求 对 象 ， 我 们 可 以 通过 这 个 对 象 获 取 请 求 的 一 些 重要 属性 ， 
例如 相关 的 DOM 元 素 . 下 列 代码 会 拦截 所 有 400 Bad Request 响 应 ,把 验证 消息 插入 相关 的 DOM 
中 。 如 果 把 Measly 紧 密 绑 定 在 请 求 的 视觉 上 下 文中 ， 用 户 就 能 轻易 看 到 验证 消息 : 
measly.on(400, function (err, body) { 
Var message = document .createElement ('pre'); 
message.classList.add('validation-messages'); 
message.innerText = body.validation.messages.join('\n'); 


this.context.appendChild (message); 
js 


使 用 Measly 处 理 AJAX 错 误 非 常 方便 ， 几 乎 不 需要 做 额外 的 工作 。 我 们 已 经 在 使 用 上 下 文 确 
保 切 换 视图 时 会 中 止 请 求 了 ， 因 此 只 需 在 必要 时 ， 如 处 理 局 部 视图 和 HTML 表 单 时 ， 声 明 一 些 子 
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层 即 可 。 关 于 Measly 还 有 最 后 一 点 要 讲 一 -缓存 方式 。 

Measly 的 缓存 方式 

Measly 提 供 了 两 种 缓存 方式 。 第 一 种 方式 是 定义 一 个 时 长 , 在 这 个 时 间 段 内 默认 为 响应 是 最 
新 的 , 也 就 是 说 , 在 这 段 时 间 内 若 再 请 求 相 同 的 资源 , 会 使 用 缓存 中 的 响应 。 在 下 列 代 码 清单 中 ， 
我 们 把 缓存 时 长 设 为 60 秒 ， 如 果 距 上 次 请 求 不 到 60 秒 时 点 击 按钮 ，Measly 会 使 用 缓存 中 的 副本 ; 
如 果 数 据 有 更 新 ，Measly 会 重新 请 求 。 


代码 清单 9.3 ”使 用 Measly 缓 存 文件 
measly.get ('/api/products', { 
cache: 60000 
中字 
queryButton.addEventListener('click', function () { 
Var req = measly.get ('/api/products', { 
cache: 60000 
人 
req.on('data', function (body) { 
console.1log (body); 
上 
jy) 


避免 向 服务 器 发 送 不 必要 的 HTTP 请 求 还 有 一 种 方式 一 一 手动 阻止 。 下 列 代码 清单 说 明了 如 
何 手动 缓存 一 组 商品 。 


代码 清单 9.4 手动 阻止 不 必要 的 HTTP 请 求 


















































var saved = []; // 我 们 知道 这 是 一 组 最 新 的 商品 
var req = measly.get ('/api/products'); 
req.on('ready', function () { 


if (computable) { 
req.prevent (null, saved);} 
} 
站 过 
req.on('data', function (body) { 
console.log (body); 
下 站 元 


本 章 的 配套 源码 ch09/01_ a-measly-client-side-layer 文 件 夹 中 有 一 个 简单 的 示例 ,演示 如 何 使 用 
Measly。 在 这 个 示例 中 ， 我 演示 了 如 何 为 DOM 中 不 同 部 分 的 请 求 创建 不 同 的 上 下 文 。 
Measly 可 能 不 是 解决 问题 的 最 佳 工 具 ， 但 结合 本 书 其 他 内 容 ， 我 希望 它 能 启发 你 去 思考 。 














9.5 总 结 


设计 API 并 不 难 ， 对 吧 ? 本 章 我 们 介绍 了 很 多 基础 知识 ， 还 说 明了 很 多 最 佳 实践 ， 总 结 起 来 
有 以 下 几 点 。 

口 可 靠 的 API 设 计 应 该 遵守 REST 架 构 的 约束 ， 要 提供 符合 习惯 的 端点 ， 过 滤 输 入 ， 还 要 提 
供 一 致 的 输出 。 
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口 为 了 提供 快速 又 安全 的 API 服 务 ，REST API 要 分 页 、 限 流 和 缓存 。 

口 要 重视 文档 ， 降 低 API 的 使 用 门槛 。 

口 应 该 在 逻辑 层 和 数据 层 的 支持 下 开发 一 个 简单 的 API 层 。 

口 简单 的 客户 端 层 能 为 AJAX 请 求 指定 上 下 文 , 用 于 验证 响应 和 在 用 户 界 面 中 泻 染 HTTP 错 误 。 
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Node.js 的 模块 











这 篇 附录 介绍 模块 和 Node.js， 以 便 你 能 在 Grunt 构 建 中 有 效 使 用 它们 。Node.js 平 台 构 建 在 V8 
JavaScript 引 敬之 上 。 谷 歌 Chrome 浏 览 器 就 使 用 这 个 引 敬 处理 JavaScript。 本 书 使 用 的 构建 工具 
Grunt 运 行 在 Node 平 台中 。Node 中 的 代码 和 其 他 所 有 JavaScript 代 码 一 样 ， 都 在 单个 线程 中 执行 。 

Node 提 供 了 一 个 简单 的 命令 行 接口 (Command-Line Interface, 简称 CLI ) 实用 工具 一 一 npm,， 
用 于 从 打包 的 Node 模 块 注册 处 下 载 并 安装 包 。 本 书 在 必要 的 地 方 会 教 你 如 何 使 用 npm。 我 们 要 先 
安装 Node.js， 因 为 npm 捆 绑 在 其 中 。 

















A.1 安装 Node.js 


Node 有 多 种 安装 方式 。 如 果 你 只 想 动 动 鼠 标点 击 几 下 ， 可 以 访问 Node 的 网 站 ， 地 址 是 
https://modejs.org/， 然 后 点 击 那 个 大 大 的 绿色 “Install” 按 钮 。 二 进 制 文件 下 载 完 之 后 ， 如 果 需 要 ， 
先 解压 ， 然 后 双击 ， 即 可 安装 Node。 就 这 人 么 简单 。 

如 果 你 选择 在 终端 里 安装 ， 可 以 使 用 nvm。 这 是 社区 成 员 开 发 的 Node 版 本 管理 工具 。nvm 的 
安装 方法 是 ， 在 终端 执行 下 述 命令 : 

curl https://raw.github.com/creationix/nvm/master/install.sh | bash 

nvm 安 装 好 后 ,重新 打开 终端 窗口 才能 使 用 nvm 提 供 的 CLI。 如 果 安 装 nvm 时 遇 到 了 问题 , 请 
访问 它 的 公开 仓库 来 寻求 帮助 ， 地 址 是 https://github.com/creationix/nvm。 有 了 nvm， 我 们 就 可 以 
安装 某 个 Node 版 本 了 ,方法 如 下 所 示 : 


nvm install 0.10 
nvm alias default stable 


第 一 个 命令 的 作用 是 安装 0 .10 .x 分 支 的 稳定 版 Node; 第 二 个 命令 的 作用 是 ， 从 现在 开始 ， 
让 新 打开 的 终端 窗口 都 使 用 刚 安 装 的 Node 版 本 。 
很 好 , 现在 安装 好 Node 了 ! 下 面 该 学 习 Node 的 模块 系统 了 , 这 个 系统 遵守 CommonJS 模 块 规范 。 


A.2 模块 系统 


启动 Node 进 程 时 要 指定 Node 应 用 的 入口 点 ,例如 执行 的 命令 是 node app.js， 那 么 Node 进 
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程 会 把 app.js 文 件 当 作 入 口 点 。 如 果 想 加 载 其 他 代码 ， 要 使 用 require 函 数 。 这 个 函数 的 参数 是 
一 个 路 径 ， 作 用 是 加 载 在 这 个 位 置 找到 的 模块 。 传 给 require 函 数 的 路 径 有 以 下 几 种 形式 。 

口 相对 于 require 函 数 所 在 的 文件 ， 以 .号 开头 。 例如， 如 果 使 用 的 是 require('. /main. 
js') ， 说 明 要 加 载 和 该 脚本 在 同一 个 目录 中 的 某 个 文件 。 我 们 可 以 使 用 . .加 载 父 目录 中 
的 脚本 。 

口 目录 的 路 径 。 此 时 ，require 消 数 会 在 指定 目录 中 查找 名 为 index.js 的 文件 ， 然 后 加 载 它 。 
口 绝对 路 径 。 这 种 形式 很 少 使 用 。 我 们 可 以 指定 一 个 文件 的 绝对 路 径 ， 如 下 列 代码 所 示 : 


require('/Users/nico/dev/buildfirst/main.js') 


口 包 名 。 如 果 要 导入 包 , 直接 指定 包 名 即 可 。 例 如 , 若 想 导 入 async 包 ,应 该 使 用 require 
(async')。 大 多 数 情况 下 ， 这 和 使 用 require( ' ./node_modules/ async') 的 效果 
是 一 样 的 。 
A.3 导出 功能 
如 果 只 是 导入 模块 ， 而 不 使 用 它 提供 的 功能 ， 那 就 没什么 意义 。 在 模块 中 导出 功能 ( 也 就 是 
模块 的 API ) 的 方式 是 ， 将 其 赋值 给 module .exports。 以 下 面 这 个 模块 举例 说 明 : 


Var mine = 'gold'; 




































































module.exports = function (pure) { 
return pure + mine; 


Ne 

如 果 使 用 var thing = require('./thing.js') 获 取 这 个 模块 ,那么 ching 的 值 就 是 我 
们 在 thing.js 文 件 中 赋 给 module .exports 的 值 。 注意 , 在 浏览 需 中 这 样 做 会 隐 式 赋值 给 全 局 对 象 
window， 但 CommonJS 模 块 系统 会 让 模块 中 声明 的 变量 保持 和 私有， 除非 显 式 赋值 给 moaule . 
exports， 才 会 公开 变量 。Node 中 有 个 名 为 global 的 全 局 对 象 ， 我 们 可 以 把 变量 赋值 给 这 个 对 
象 ， 但 是 不 推荐 这 样 做 ， 因 为 这 违背 了 模块 化 原则 。 


A.4 关于 包 


应 用 的 依赖 在 package.json 文 件 中 定义 , npm 会 使 用 这 个 文件 找 出 运行 应 用 所 需 的 包 。 安装 包 
时 ， 可 以 指定 --save 标 记 ， 让 npm 自 动 把 这 个 依赖 添加 到 package.json 清 单 文 件 中 ， 这 样 就 无 需 
我 们 手动 添加 了 。 如 果 执 行 npm install 命 令 时 不 指定 任何 参数 ， 会 安装 package.json 文 件 中 的 
所 有 依赖 。 

本 地 依赖 安装 在 node_modules 目 录 中 ， 版 本 控制 系统 应 该 忽略 这 个 目录 。 对 Git 来 说 ， 我 们 
可 以 在 .gitignore 文 件 中 添加 一 行 ， 写 入 node_modules， 这 样 Git 就 知道 不 能 跟踪 这 个 目录 中 的 
文件 了 。 

以 上 就 是 在 Grunt 构 建 中 有 效 使 用 Node 所 需要 掌握 的 知识 。 
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Grunt 是 为 应 用 编写 、 配 置 和 自动 执行 任务 的 工具 ,可 用 于 简化 JavaScript 文 件 或 编译 LESS 格 
式 的 样式 表 等 。 

LESS 是 一 种 CSS 预 处 理 器 ， 在 第 2 章 介绍 过 。 简 化 的 本 质 就 是 删除 空白 ， 作 些 句法 树 优化 ， 
从 而 让 文件 变 小 。 我 们 执行 的 有 些 任 务 和 代码 质量 有 关 ， 例 如 运行 单元 测试 (参见 第 8 章 ), 或 者 
执行 JSHint 等 代码 覆盖 率 工 具 。 当 然 有 些 也 和 部 署 过程 有 关 ， 例 如 通过 FTP 部 署 应 用 ， 作 部 署 前 
的 准备 ， 或 者 生成 API 文 档 。 

Grunt 只 是 执行 构建 任务 的 工具 ， 任 务 由 插件 定义 。 下 面 说 明 插 件 。 


B.1 ” Grunt 插件 


Grunt 只 是 个 框架 ,执行 所 需 的 任务 时 要 选择 合适 的 插件 。 例 如 ， 我 们 可 以 使 用 grunt- 
contrib-concat 插 件 打包 静态 资源 。 此 外 ， 还 要 根据 需求 配置 插件 ， 例 如 指定 要 打包 的 文件 ， 
以 及 打包 文件 的 保存 路 径 。 

一 个 插件 可 以 定义 一 个 或 多 个 Grunt 任 务 。Grunt 插 件 使 用 JavaScript 编 写 和 配置 , 运行 在 Node 
平台 中 。Node 社 区 成 员 开 发 和 维护 了 很 多 现成 的 Grunt 插 件 ， 我 们 只 需 配 置 各 个 插件 即 可 ， 稍 后 
就 会 讲 到 。 如 果 找 不 到 符合 特定 需求 的 插件 ， 你 还 可 以 自己 开发 。 


B.2 任务 和 目标 


一 个 任务 中 可 以 有 多 个 目标 , 在 每 个 目标 中 可 以 进一步 配置 任务 。 目 标 经 常用 于 为 不 同 的 构 
建 模式 编译 应 用 ， 这 一 点 在 第 3 章 提 过 。 目 标的 作用 是 重用 相同 的 任务 ， 但 目的 稍 有 不 同 。LESS 
是 一 门 富有 表现 力 的 语言 , 能 编译 成 CSS。 你 可 能 会 在 任务 中 编译 应 用 的 不 同 部 分 所 使 用 的 LESS 
代码 ,而且 可 能 需要 使 用 不 同 的 目标 , 因为 在 其 中 一 个 目标 编译 得 到 的 结果 中 添加 源码 映射 并 指 
向 编译 前 的 LESS 代 码 ， 会 比较 易于 调试 ， 而 在 其 他 目标 中 则 尽量 简化 样式 表 。 


















































































































































B.3 命令 行 接 口 


Grunt 提 供 了 一 个 命令 行 接 口 (Command-Line Interface， 简 称 CLI )， 名 为 grunt。 我 们 可 以 
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使 用 这 个 接口 执行 任务 。 以 下 列 命令 为 例 来 说 明 如 何 使 用 这 个 工具 : 

grunt less:debug mocha 

假设 我 们 已 经 配置 好 了 Grunt ( 稍 后 会 说 明 如 何 配置 ), 这 个 命令 会 执行 1ess 任 务 中 的 depug 
目标 。 如 果 这 个 任务 成 功 执行 ， 还 会 继续 执行 nocha 任 务 中 的 所 有 目标 。 记 住 ， 如 果 某 个 Grunt 
任务 失败 了 ，Grunt 不 会 尝试 执行 后 续 任 务 ， 而 是 会 退出 ， 并 显示 失败 的 原因 一 一 了 解 这 一 点 很 

有 一 点 值得 说 一 下 , 任务 是 按 顺 序 执行 的 , 不 是 并 行 执行 ,只 有 前 一 个 任务 执行 完毕 才 会 执 
行 下 一 个 任务 。 我们 不 用 每 次 都 在 命令 行 中 输入 完整 的 任务 列表 , 而 是 可 以 把 一 系列 任务 定义 成 
任务 别名 ， 然 后 执行 别名 。 如 果 创 建 别 名 时 使 用 了 特殊 的 名 称 aefault， 那 么 执行 grunt 命 令 时 
如 果 不 指定 参数 ， 就 会 执行 这 个 别名 表示 的 一 系列 任务 。 
图 论说 得 够 多 了 ， 下 面 我 们 来 动手 使 用 Grunt。 我 们 首先 要 安装 Grunt， 然 后 动手 实 操 前 面 所 
讲 的 知识 。 安 装 Grunt 前 要 先 安 装 Node， 因 为 Grunt 运 行 在 这 个 平台 中 。Node 的 安装 方法 参见 附录 
A， 安 装 好 之 后 我 们 再 继续 往 下 看 。 

下 面 安装 Grunt CLI,， 方法 是 在 终端 执行 下 述 命令 ,使 用 npm 安 装 : 

npm install --global grunt-cli 

--global 标 记 的 作用 是 告诉 npn 我 们 安装 的 包 不 是 项 目 层面 的 ， 而 是 系统 全 局 层面 的 。 其 实 ， 
这 么 做 是 为 了 直接 在 命令 行 中 使 用 安装 的 包 。 我 们 可 以 执行 以 下 命令 ,确认 是 否 正确 安装 了 这 个 CLI: 

grunt --version 

这 个 命令 应 该 输出 当前 安装 的 Grunt CLI 的 版 本 号 。 很 好 ! 目前 我 们 所 完成 的 操作 都 只 需 做 
一 次 ， 以 后 不 必 再 做 。 那 么 如 何 使 用 Grunt 呢 ? 


B.4 在 项 目 中 使 用 Grunt 


假设 我 们 想 在 一 个 使 用 PHP ( 后 端 使 用 哪 种 语言 都 行 ) 开发 的 Web 应 用 中 自动 执行 lint 程 序 
( lin 程序 是 一 种 静态 分 析 工 具 ， 修 改 JavaScript 文 件 后 会 报告 句法 问题 )， 应 该 怎么 做 呢 ? 

首先 ,我们 需要 在 项 目的 根 目录 中 创建 一 个 名 为 package.json 的 文件 。 这 是 一 个 清单 文件 ， 
npm 使 用 它 管理 所 有 的 依赖 。 这 个 文件 的 要 求 不 多 ， 只 要 是 有 效 的 JSON 对 象 即 可 ， 因 此 使 用 {} 
就 行 。 进 入 应 用 的 根 目录 ， 然 后 在 终端 执行 以 下 命令 : 

echo "{}" > package.json 

接 下 来 我 们 要 安装 一 些 依赖 。 我 们 要 安装 grunt， 它 是 框架 。 别 把 grunt 和 grunt-cli 搞 混 
了 ，grunt-cli 的 作用 是 收集 信息 ， 把 任务 交 给 本 地 安装 的 grunt 包 执行 。 我 们 还 要 安装 
grunt-contrib-jshint 包 ， 这 个 包 提 供 了 用 于 执行 JSHint (一 个 JavaScript lint 工 具 ) 的 Grunt 
任务 ， 而 且 易于 配置 。npm install 命 令 可 以 一 次 安装 多 个 包 ， 下 面 就 来 安装 这 两 个 包 : 


npm install --save-dev grunt grunt-contrib-jshint 
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--save-dev 标 记 的 作用 是 告诉 npm 把 这 两 个 包 添 加 到 清单 文件 package.json 中 ， 并 将 其 标记 
为 开发 依赖 。 我 们 最 好 把 无 需 在 生产 服务 器 中 使 用 的 依赖 标记 为 开发 依赖 ,这 是 最 佳 实践 。 应 用 
运行 之 前 一 定 要 先 构建 组 件 。 

我 们 安装 好 了 框架 、 插 件 和 CLI， 再 配置 好 任务 就 能 开始 使 用 Grunt 了 。 








B.5 配置 Grunt 


配置 Grunt 前 ， 要 先 创 建 Gruntfile.js 文 件 。 所 有 构件 任务 的 配置 和 定义 都 保存 在 这 个 文件 中 。 
下 列 代 码 是 Gruntfile,js 文 件 的 内 容 示例 : 











modqule .exports = function (grunt) { 
grunt.initConfig({ 
JShirnt:- + 
browser: ['public/jJSs/**/*.js"] 


} 
3 
grunt.loadNpmTasks ('grunt-contrib-jshint'); 
grunt .registerTask('default', ['jshint']); 
六 


我 们 在 附录 A 中 介绍 Node.js 时 说 过 ,这 是 Common.JS 模 块 ， 导 出 了 一 个 函数 ，Grunt 会 调用 这 
个 函数 ， 配 置 任务 。initconfig 方 法 的 参数 是 一 个 对 象 ， 这 个 参数 是 所 有 任务 和 目标 的 配置 。 
这 个 配置 对 象 中 的 项 层 属性 代表 了 针对 某 个 特定 任务 的 配置 。 例如，jshint 属 性 是 jshint 任 务 
的 配置 。 任 务 配置 中 的 属性 是 目标 的 配置 。 
在 上 述 代 码 中 ， 我 们 把 jsnint 任 务 的 prowser 目 标 设 为 ['pupblic/js/**/*.js']。 这 叫 
通 配 模式 ， 用 于 定义 目标 文件 。 稍 后 我 们 会 详细 说 明 通 配 模式 ， 现 在 你 只 需 知 道 ， 这 个 通 配 模 式 
会 匹配 public/js 目 录 及 其 子 目录 中 的 所 有 .js 文件 。 

loadNpmTasks 方 法 告诉 Grunt 加 载 指定 Grunt 插 件 中 的 所 有 任务 。 上 述 代 码 会 加 载 jshint 任 
务 。 稍 后 我 们 来 介绍 如 何 自己 编写 任务 。 

registerTask 方 法 可 以 定义 任务 别名 ， 其 参数 是 一 个 任务 名 和 一 个 数组 ， 数 组 中 的 元 素 是 要 
执行 的 任务 。 我 们 把 aefault 别 名 执行 的 任务 设 为 jshint, 所 以 这 个 别名 会 执行 jshint :browser， 
以 及 以 后 会 在 jshint 任 务 中 添加 的 其 他 所 有 目标 。 这 个 别名 的 名 称 为 aefault ， 因 此 在 命令 行 
中 执行 grunt 命 令 时 ， 如 果 不 指定 参数 ， 就 会 执行 这 个 别名 。 我 们 来 试 一 下 : 


grunt 


共 喜 ， 你 已 经 执行 了 你 的 第 一 个 Grunt 任 务 ! 不 过 ， 你 或 许 还 没有 完全 理解 文件 路 径 的 通 配 
模式 ， 下 面 就 来 解决 这 个 问题 。 


B.6 通 配 模式 


使 用 ['public/js/**/*.js'] 这 样 的 模式 可 以 快速 定义 要 处 理 的 文件 。 只 要 知道 如 何 正 确 
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使 用 ,这 种 模式 很 容易 理解 。 通 配 模 式 使 用 纯 文本 编写 , 用 于 引用 文件 系统 中 的 路 径 。 例如， 我 
们 可 以 不 用 任何 特殊 字符 ， 写 成 docs/api .txt， 这 个 模式 匹配 的 文件 就 是 docs/api.txt。 注意 ， 
这 是 相对 路 径 ， 是 相对 Gruntfile.js 文 件 的 位 置 而 言 的 。 

如 果 使 用 特殊 字符 ， 这 种 模式 的 作用 就 强大 了 。 例 如 ， 把 Gocs/api .txt 改 成 docs/*.txt 
后 ,会 匹配 docs 目 录 中 的 所 有 文本 文件 。 如 果 还 想 匹 配子 目录 中 的 文件 ， 需 要 使 用 **， 写 成 
docs/**/*.txt 一 一 这 叫 递归 通 配 模 式 ( globstar pattern )。 


B.6.1 花 括 号 表达 式 


除了 使 用 星 号 之 外 , 还 可 以 使 用 花 括 号 表达 式 。 如 果 想 匹配 多 种 不 同类 型 的 图 像 ， 可 以 使 用 
类 似 这 样 的 模式 : images/ *. {png,gif,jpg}。 这 个 模式 会 匹配 格式 为 .png、.gif 和 和 .jpg 的 图 像 。 
虽然 花 括 号 表达 式 最 党 在 扩展 名 中 使 用 , 但 不 局 限于 此 ,还 可 以 用 来 匹配 多 个 不 同 的 目录 , 例如 
public/{js,css}/**/*。 注 意 ,我 们 没 指定 扩展 名 ， 这 样 做 是 可 行 的 ， 因 为 这 样 一 来 ， 星 号 
会 匹配 任何 文件 类 型 ， 而 不 局 限于 一 种 特定 的 类 型 。 


B.6.2 ” 取 反 表达 式 


最 后 ,我 们 来 介绍 取 反 表达 式 。 这 种 表达 式 理解 起 来 有 点 困难 。 取 反 表 达 式 的 作用 可 以 这 么 
理解 : 从 前 面 匹配 的 结果 中 删除 匹配 这 个 模式 的 结果 。 模式 是 按 顺序 匹配 的 ， 所 以 包含 和 排除 的 
顺序 很 重要 。 取 反 表 达 式 以 ! 符 号 开头 ,， 经常 像 这 样 使 用 : ['js/**/*.js','!js/vendor/**/ 
* .js']。 这 个 模式 的 意思 是 “包含 js 目录 及 其 子 目 录 中 的 所 有 文件 ， 但 要 排除 js/vendor 目 录 
中 的 文件 ”。 使 用 lint 程 序 检查 代码 时 这 种 模式 很 有 用 ， 因 为 我 们 只 想 检查 自己 编写 的 代码 ， 而 不 
检查 第 三 方 库 中 的 代码 。 

关于 通 配 模式 我 要 特别 提 一 件 事 ， 我 经 常 看 到 有 人 抱怨 说 [' js'， '!js/vendqor'] 无 效 。 
现在 ， 既 然 我 们 已 经 知道 通 配 模式 的 运作 方式 了 ,， 那么“ 无效” 的 原因 就 很 容易 理解 了 。 第 一 个 
通 配 模式 只 会 匹配 js 这 个 目录 本 身 ， 因 此 !js/vendqor 什 么 用 都 没有 。 通 配 模 式 会 放大 js 的 匹配 
范围 ， 匹 配 整 个 目录 中 的 所 有 文件 ， 因 此 包括 js/vendor 目 录 中 的 文件 。 这 个 问题 的 修正 方式 很 简 
单 ， 即 使 用 递归 模式 ， 改 成 ['js/**/*.js'，'!js/vendor/**'] ， 让 通 配 模式 放大 匹配 的 日 
录 范 围 。 

我 们 还 要 再 讨论 两 个 话题 ,配置 任务 和 自己 编写 任务 。 下 面 详细 说 明 如 何 配置 Grunt 要 执行 
的 任务 。 


B.7 设置 任务 


下 面 我 们 随便 从 网 上 找 一 个 插件 ,学 习 如 何 配置 任务 。 首 先 , 我 们 先 回 顾 一 下 B.1 节 的 示例 。 
还 记得 我 们 是 怎么 配置 JSHint 的 吗 ? 我 们 使 用 的 代码 如 下 所 示 : 


module.exports = function (grunt) { 
grunt .initConfig({ 
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Jshint: 区 
browser: ['public/js/**/*.js'] 
} 
过 
grunt.loadNpmTasks ('grunt-contrib-jshint'); 
grunt .registerTask('default', ['jshint']); 
J} 
假设 我 们 想 简 化 ( 参见 第 2 章 ) CSS 样 式 表 ， 并 把 多 个 样式 表 拼接 成 一 个 文件 ， 那 么 我 们 可 
以 在 谷歌 中 搜索 能 完成 这 种 操作 的 Grunt 择 件 ， 也 可 以 访问 http://gruntjs.com/plugins 查 找 。 我 们 访 
问 这 个 页 面 , 然后 输入 “css”, 出 现 的 第 一 个 结果 是 grunt -contrib-cssmin, 而 且 会 链接 到 npm 
网 站 中 这 个 包 的 页 面 。 
npm 网 站 通常 会 显示 README 文 件 的 内 容 , 还 会 链接 到 GitHub 仓 库 中 完整 的 源码 。 这 个 包 的 
README 文 件 说 明了 如 何 从 npm 中 安装 这 个 包 ， 以 及 如 何在 Gruntfile.js 文 件 中 调用 loagdNpm 
Tasks 方 法 ， 如 下 列 代 码 所 示 : 


module.exports = function (grunt) { 
grunt.initConfig({ 
jshint: { 
browser: ['public/js/**/*.js'] 























} 
3 
grunt.loadNpmTasks ('grunt-contrib-jshint'); 
grunt.loadNpmTasks ('grunt-contrib-cssmin'); 
grunt .registerTask('default', ['jshint']); 
} 
我 们 还 要 按照 前 面 安装 grunt -contrib-jshint 包 的 方式 ， 从 npm 中 安装 这 个 包 : 
npm install --save-dev grunt-contrib-cssmin 
现在 剩 下 的 工作 就 是 配置 这 个 插件 了 。Grunt 插 件 通 常 都 有 完善 的 文档 ， 在 插件 的 主页 会 有 
相关 的 例子 ， 说 明 如 何 配置 ， 还 会 详细 列 出 所 有 选项 。 以 grunt-contrib- 开 头 的 包 由 Grunt 团 
队 开发 ,所 以 使 用 时 基本 不 会 遇 到 问题 。 如 果 同 一 项 任务 有 多 个 可 选择 的 包 ， 遇 到 不 能 用 或 者 文 
档 不 完整 的 ， 就 换 用 其 他 包 ， 没 必要 “从 一 而 终 ”。 流 行 度 (npm 中 的 安装 量 和 GitHub 中 的 关注 
数 ) 是 评价 包 质 量 的 一 项 重要 指标 。 
搜索 时 找到 的 第 一 个 包 也 能 拼接 CSS， 所 以 我 们 无 需 再 使 用 其 他 插件 。 下 列 代 码 配置 
grunt-contrib-cssmin， 让 它 在 简化 样式 表 的 同时 进行 拼接 : 
cssmin: { 
combine: { 
files: { 
'path/to/output.css': ['path/to/input_one.css', 'path/to/ 
input_two.css'] 


} 
} 


你 可 以 根据 自己 的 需求 随意 调整 和 集成 配置 。 此 外 ， 还 要 添加 一 个 名 为 build 的 任务 别名 。 
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别名 可 以 用 来 定义 工作 流程 ， 整 个 第 一 部 分 的 内 容 就 是 介绍 如 何 制 定 流程 。 例 如 ， 第 3 章 使 用 别 
名 定义 了 调试 流程 和 发 布 流程 : 





module.exports = function (grunt) { 
grunt .initConfig({ 
jshint: { 
browser: ['public/jJs/**/*.Jjs"] 


二 
cssmin: { 
lL:( 
files: { "build/css/all.min.css': ['public/css/**/*.css'] } 
} 
} 
}); 
grunt.loadNpmTasks 
grunt.loadNpmTasks 
grunt .registerTask 
grunt .registerTask 


} 

就 这 么 简单 ! 如 果 在 终端 执行 grunt pui1lg 命 令 ，Grunt 会 把 所 有 CSS 打 包 到 一 起 ， 简 化 后 
写 入 all.min.css 文 件 。 这 个 示例 ， 以 及 目前 用 到 的 其 他 示例 ， 都 可 以 在 本 书 配 套 源码 的 appendix/ 
introduction-to-grunt 文 件 夹 中 找到 。 这 篇 附录 的 最 后 一 节 会 说 明 如 何 自己 动手 编写 Grunt 任 务 。 


B.8 自己 编写 任务 


Grunt 中 的 任务 分 为 两 种 多 任务 和 普通 任务 。 你 可 能 猜 到 了 ， 二 者 之 间 的 区 别 是 ， 多 任务 
可 以 设置 不 同 的 任务 目标 ,然后 分 别 执行 各 个 目标 。 实 际 上 ， 几 乎 所 有 的 Grunt 任 务 都 是 多 任务 。 
下 面 演示 如 何 编 写 一 个 多 任务 。 

我 们 要 编写 的 任务 用 于 统计 一 组 文件 中 的 字数 ,如果 统计 的 字数 大 于 设 定 值 , 就 认为 任务 执 
行 失 败 。 先 看 下 列 代 码 片段 : 

grunt.registerMultiTask('wordcount', function () { 

var options = this.options({ 
threshold: 0 


}); 
2 


我 们 为 hreshola 选 项 设 定 了 默认 值 , 这 个 选项 的 值 在 配置 任务 时 可 以 被 覆盖 , 稍 后 你 就 会 
看 到 怎么 做 。 因 为 我 们 调用 的 是 regi sterMultiTask 方 法 ， 因 此 这 个 任务 支持 多 个 目标 。 现 在 
我 们 要 获取 一 组 文件 ， 读 取 这 些 文件 的 内 容 ， 然 后 统计 字数 : 


Var. total = 05 
this.files.forEach(function (file) { 
file.src.forEach (function (src) { 
if (grunt.file.isDir(src)) { 

return; 


} 


grunt-contrib-jshint'); 
grunt-contrib-cssmin'); 
default', ['jshint']); 


( 
( 
( 
('build', ['cssmin']); 
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var data = grunt.file.read(src); 
var words = data.split(/[^\wl+/9g) .length; 
total += words; 
grunt .verbose.writelnl(src, 'contains', words, 'words.'); 
局 
3 


Grunt 提 供 了 一 个 files 对 象 ， 我 们 可 以 使 用 这 个 对 象 遍 历 文件 ， 排 除 目录 ， 然 后 读 取 文件 中 
的 数据 。 计 算出 字数 后 , 我 们 可 以 把 结果 打印 出 来 , 如果 大 于 threshold 的 值 ， 则 这 个 任务 失败 : 











if (options.threshold) { 
if (total > options.threshold) { 
grunt .log.error('Threshold of', options.threshold, 'exceeded. Found', 
total, 'words.'); 
grunt.fail.warn('Too many words'); 
} else { 
grunt.log.ok(total, 'words foungd in total.'); 
} 
} else { 
grunt .log.writeln(total, 'words found in total.'); 


} 
任务 写 好 之 后 ,我们 要 像 之 前 那样 配置 一 个 任务 目标 : 


wordcount: { 
capped: { 
files: { 
Ses Cexty*/ EE 
由 
options: { 
threshold: 3000 
} 
} 
} 


如 果 这 些 文件 中 的 字数 超过 3000 个 ， 这 个 任务 就 会 失败 。 注 意 ， 如 果 没 有 设 定 threshold 
的 值 ， 就 会 使 用 编写 任务 时 设 定 的 默认 值 0。 这 些 信息 足够 你 理解 Grunt 了 : 第 1 章 介绍 了 Grunt， 
第 2 章 深 入 介绍 了 构建 任务 、 如 何 执行 任务 ， 以 及 如 何 使 用 任务 制定 用 于 开发 、 发 布 和 部 署 的 构 
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决定 使 用 什么 技术 从 来 就 是 件 很 难 的 事 , 因为 选择 一 种 技术 就 好 比 作出 了 一 项 承诺 ,而 中 途 
放弃 技术 就 像 收回 承诺 那么 难 。 但 最 终 还 是 要 选 定 一 种 技术 的 。 选 择 构 建 技术 时 也 会 遇 到 这 种 问 
题 ， 我 们 必须 谨慎 作 抉 择 。 

在 这 本 书 中 ， 我 选择 的 构建 工具 是 Grunt。 我 尽量 不 过 多 介绍 Grunt 的 相关 概念 ， 而 是 重点 说 
明 构 建 过 程 ， 只 把 Grunt 当 作 一 种 辅助 工具 。 我 选择 Grunt 的 原因 有 很 多 ， 其 中 几 个 如 下 所 示 。 
口 Grunt 有 良好 的 社区 ， 即 使 在 Windows 系 统 中 也 很 好 。 

口 Grunt 广 受 欢 迎 ， 在 Node 社 区 之 外 也 有 大 量 用 户 。 
口 Grunt 易 于 学 习 ， 只 需 选 择 并 配置 插件 。 没 有 高 级 概念 ， 也 不 需要 预备 知识 。 

鉴于 这 些 原因 ， 在 一 本 讲解 构建 过 程 的 书 中 特别 适合 使 用 Grunt。 但 我 要 漆 清 一 点 ，Grunt 并 
不 是 唯一 的 选择 ， 有 些 流行 的 构建 工具 可 能 比 Grunt 更 符合 你 的 需求 。 

我 写 这 篇 附录 的 目的 是 说 明 我 在 前 端 开发 中 最 常 使 用 的 三 个 构建 工具 之 间 的 区 别 。 这 三 个 构 
建 工具 的 简介 如 下 所 示 。 

口 Grunt: 这 是 本 书 使 用 的 构建 工具 ， 由 配置 驱动 。 
口 npm: 一 种 包 管 理 器 ， 也 可 以 当 作 构 建 工 具 。 
口 Gulp: 介 于 Grunt 和 npm 之 间 的 构建 工具 ， 由 代码 驱动 。 

我 还 会 说 明 在 哪些 情况 下 更 适合 使 用 哪个 工具 。 

阅读 这 篇 附录 前 ， 你 应 该 先 阅读 第 一 部 分 和 附录 B。 附 录 B 对 Grunt 作 了 介绍 ， 第 一 部 分 则 具 
体 说 明了 如 何 使 用 Grunt。 我 假设 你 在 阅读 这 篇 附录 之 前 已 经 具备 了 Grunt 基 础 知识 。 我 们 首先 来 
说 明 Grunt 擅 长 做 什么 事 。 
































































































































C.1 _Grunt 的 优点 


Grunt 最 大 的 优点 是 易于 使 用 ， 程 序 员 几乎 毫 不 费力 就 能 使 用 JavaScript 制 定 构建 流程 。 我 们 
只 需 搜索 合适 的 插件 ， 阅 读 插 件 的 文档 ,然后 安装 并 配置 插件 即 可 。 因 此 ， 在 成员 技能 各 异 的 大 
型 开发 团队 中 ， 每 个 人 都 能 调整 构建 流程 ， 满 足 项 目 最 新 的 需求 。 团 队 成 员 甚至 无 需 精通 Node， 
只 需 在 配置 对 象 中 添加 属性 ， 把 任务 名 称 和 组 成 构建 流程 的 操作 对 应 起 来 即 可 。 

Grunt 的 搬 件 非常 多 ， 很 少 需要 自己 编写 构建 任务 ， 因 此 个 人 或 团队 都 能 快速 制定 构建 过 程 。 
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如 果 使 用 构建 优先 原则 ， 这 一 点 尤其 重要 。 即 便 你 只 想 逐 步 制定 构建 流程 ， 速 度 也 很 重要 。 
Grunt 还 可 以 用 来 管理 部 署 ， 因 为 它 有 很 多 包 能 完成 相关 的 操作 ， 例 如 grunt-git、 


grunt-rsync 和 和 grunt-ec2。 











C.2 ”Grunt 的 缺点 


Grunt 有 什么 缺点 呢 ? 如 果 构 建 流程 特别 复杂 ， 使 用 Grunt 会 变 得 很 繁琐 。 构 建 流程 制定 好 之 
后 ,过 一 段 时 间 往 往 很 难 理解 整个 流程 。 如 果 构 建 流程 中 的 任务 数 达到 两 位 数 ， 几 乎 可 以 肯定 的 
是 ， 我 们 要 分 别 执行 同一 个 任务 中 的 不 同 目标 ， 这 样 整个 流程 才能 按照 正确 的 顺序 执行 。 

因为 任务 使 用 声明 的 方式 配置 , 所 以 我 们 还 得 绞 尽 脑汁 弄 清 任 务 执行 的 顺序 。 男 外 ,团队 可 
能 十 分 看 重用 于 构建 的 代码 的 可 维护 性 ， 这 对 Grunt 来 说 可 能 意味 着 每 个 任务 要 在 单独 的 文件 中 
配置 ,或 者 至 少 分 开 配置 团队 使 用 的 各 个 构建 流程 。 
























































Grunt 的 优 缺 点 概览 
Grunt 有 以 下 优点 : 
口 有 成 千 上 万 个 插件 ， 几 乎 任何 操作 都 有 相应 的 插件 ; 
口 配置 易于 理解 、 易 于 调整 ; 
口 只 需 知道 JavaScript 基 础 知识 ; 
口 支持 跨 平 台 开 发 ， 甚 至 支持 Windows; 
口 适合 大 多 数 团队 使 用 。 
Grunt 有 以 下 缺点 : 
口 基于 配置 的 构建 定义 方式 在 构建 流程 变 复 杂 时 显得 不 灵 便 ; 
口 如 果 很 多 任务 中 有 多 个 目标 ， 那 就 很 难 理解 构建 过 程 ; 
口 Grunt 比 其 他 构建 工具 速度 要 慢 。 


我 们 已 经 知道 了 Grunt 的 优 缺 点 ， 也 知道 了 什么 情况 下 更 适合 在 自己 的 项 目 中 使 用 Grunt。 下 
面 开始 讨论 npm， 说 明 如 何 把 它 当 作 构 建 工具 使 用 ， 以 及 它 和 Grunt 的 区 别 。 


C.3 把 npm 当 成 构建 工具 


如 果 想 把 apm 当 作 构 建 工具 使 用 ， 系 统 中 需要 安装 npm， 而 且 还 需要 一 个 名 为 package.json 的 
文件 。 为 npm 定 义 任 务 的 方法 很 简单 ， 我 们 只 需 在 包 清 单 文件 的 scripts 对 象 中 添加 属性 即 可 。 
属性 的 名 称 是 任务 名 ， 属 性 的 值 是 要 执行 的 命令 。 下 列 代码 片段 是 package.json 文 件 的 内 容 示 例 ， 
使 用 JSHint 的 命令 行 接口 检查 JavaScript 文 件 中 是 否 有 错误 。 使 用 npm 可 以 执行 任何 想 执 行 的 shell 
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"test": "jshint . --exclude node modules" 
} 
"devDependencies": { 

a 人 2 二 下 村 


} 
} 


任务 定义 好 之 后 ， 可 以 在 命令 行 中 运行 下 列 命 令 来 执行 这 个 任务 : 

npm run test 

注意 , npm 为 特定 的 任务 名 提供 了 快捷 方式 。 对 test 任 务 来 说 , 可 以 省 略 run, 直接 执行 npm 
test。 你 可 以 在 你 的 脚本 声明 中 把 多 个 npm run 命令 链 接 在 一 起 ， 组 成 构建 流程 。 如 果 像 下 列 
代码 清单 这 样 定义 任务 ， 那 么 执行 apm test 命令 会 先 执行 1int 任 务 ， 然 后 执行 unit 任 务 。 


代码 清单 C.1 把 npm run 命令 链接 起 来 组 成 构建 流程 


{ 
eh iy 0) lA 














"lint": "jshint . --exclude node modules", 
"unit": "tape test/*", 
"test": "npm run lint && npm run unit" 
} 
"devDependencies": { 
Melis WD 
D0 


) 
} 


我 们 还 可 以 把 任务 设 为 后 台 作 业 ， 让 其 异步 执行 。 假 设 我 们 在 构建 JavaScript 的 流程 中 要 复 
制 一 个 目录 ， 在 构建 CSS 的 流程 中 要 编译 Stylus〈 一 种 CSS 预 处 理 器 ) 样式 表 ， 那 这 种 情况 最 适 
合 异 步 执行 任务 。 为 了 异步 执行 ,我 们 可 以 在 两 个 命令 之 间或 一 个 命令 之 后 加 上 gg 符号， 如 下 列 
代码 清单 中 的 包 清单 文件 所 示 。 这 样 ， 我 们 可 以 执行 npm run pui1ld 命 令 ， 异 步 执行 这 两 个 任 
务 了 。 


代码 清单 C.2 使 用 Stylus 
€ 


verIDtS TE 汪 
"build-js": "cp -r src/js/vendor bin/js", 
"DULLACSS™. "Stylus SEGC/CSS/all. Styl 0 bin/ese™, 
"build": "npm run build-js & npm run build-css" 





























} 

"devDependencies": { 
StyLlus .0.45 0" 
. 

} 


有 时 shell 命 令 无 法 满足 需求 ， 可 能 需要 使 用 Node 包 ， 例 如 前 面 几 个 示例 中 的 stylus 或 
jshint。 这 些 依赖 要 使 用 npm 安 装 。 
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C.3.1 安装 npm 任 务 的 依赖 


若 想 使 用 JSHint， 系 统 中 要 有 它 的 命令 行 接口 。 这 个 CLI 有 两 种 安装 方式 : 
口 若 想 在 命令 行 中 使 用 ， 要 全 局 安装 ; 
口 若 想 在 npom run 任务 中 使 用 ， 要 作为 开发 依赖 安装 。 

如 果 想 在 命令 行 中 直接 使 用 JSHint， 而 不 是 在 apm run 任 务 中 使 用 ， 应 该 像 下 述 命令 这 样 指 
定 -g 标 记 ， 全 局 安装 : 

npm install -g jshint 

如 果 要 在 npm run 任 务 中 使 用 包 ， 要 像 下 列 命 令 那 样 ， 把 JSHint 添 加 到 devDependency 中 。 
使 用 这 种 方式 安装 ，npm 会 在 保存 包 依 赖 的 目录 中 查找 JSHint， 而 不 会 在 系统 中 查找 全 局 安装 的 
JSHint。 所 有 的 CLI 工 具 ， 无 需 安装 到 操作 系统 中 ， 就 可 以 使 用 这 种 安装 方式 。 


npm install --save-dev jshint 
npm 不 仅 能 使 用 CLI 工 具 。 事 实 上 ， 它 能 运行 任何 shell 和 脚本， 下 一 节 说 明 具 体 的 方式 。 
C.3.2 在 npm 任 务 中 使 用 shell 脚 本 


以 下 示例 是 一 个 运行 在 Node 平 台 中 的 脚本 是 随机 显示 一 个 表情 符号 字符 串 第 一 行 代 码 的 作 
用 是 告诉 环境 这 个 脚本 运行 在 Node 平 台中 。 


#!/usr/bin/env node 






































Nisy 











var emoji = require(‘emoji-random’); 
var emo = emoji.random(); 


console.1log (emo); 


如 果 把 这 个 脚本 保存 到 项 目的 根 目 录 中 ， 并 把 文件 命名 为 emoji， 那 么 就 需要 把 smoji- 
random 声 明 为 依赖 ， 还 要 在 包 清单 文件 的 scripts 对 象 中 添加 这 个 命令 : 


{ 





"Soripter :i{ 
"emoji": "./emoji" 
3 
"devDependencies": { 
emo srandonm sy TOL 2 


} 
} 


然后 ， 我 们 只 需 在 终端 执行 npm run emoji 命 令 ， 这样 就 能 运行 包 清 单 文 件 的 scripts 对 
象 中 emoji 属 性 的 值 所 对 应 的 脚本 了 。 








C.3.3 npm 与 Grunt 优 缺点 对 比 
与 Grunt 相 比 ， 把 apm 当 作 构 建 工 具 使 用 有 以 下 优点 。 
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口 不 受 Grunt 插 件 的 限制 ， 可 以 充分 利用 npm 中 成 千 上 万 的 包 。 

口 除了 用 来 管理 依赖 的 工具 npm 与 列 出 依赖 和 设置 构建 命令 的 清单 文件 package.json 之 外 ， 
不 需要 任何 其 他 的 CLI 工 具 和 文件 。npm 能 直接 运行 CLI 工 具 和 Bash 命 令 ， 所 以 性 能 比 
Grunt 好 。 

Grunt 最 大 的 缺点 之 一 是 受 1/O 限 制 。 大 多 数 Grunt 任 务 都 要 读 取 硬盘 中 的 数据 , 然后 再 把 数据 
写 和 硬盘。 如 果 有 多 个 任务 处 理 相 同 的 文件 ， 有 可 能 要 多 次 从 硬盘 中 读 取 数据 。 而 在 Bash 中 ， 命 
令 可 以 通过 管道 直接 把 输出 传 给 下 一 个 命令 ， 避 免 了 Grunt 中 额外 的 IO 消耗 。 

npm 最 大 的 缺点 或 许 是 ，Bash 在 Windows 环 境 中 无 法 顺畅 使 用 。 如 果 在 Windows 系 统 中 使 用 
开源 项 目 ， 那 么 执行 ppm run 命令 可 能 会 遇 到 问题 。 因 此 ，Windows 系 统 的 开发 者 可 能 会 使 用 别 
的 工具 来 代替 npm。 出 于 这 个 缺点 ， 需 要 在 Windows 系 统 中 运行 的 项 目 几 乎 不 会 使 用 npm。 

稍 后 我 们 会 发 现 ， 另 一 个 构建 工具 Gulp 与 Grunt 和 npm 都 有 相似 之 处 。 


C.4 Gulp: 流 式 构建 工具 


Gulp 和 Grunt 的 相似 之 处 在 于 ， 它 也 依赖 于 插件 、 跨 平台 ,还 支持 Windows 系 统 。Gulp 是 代码 
驱动 型 构建 工具 ， 相 比 使 用 声明 方式 定义 任务 的 Grunt，Gulp 定 义 任务 的 代码 更 易于 阅读 。Gulp 
和 npm run 也 有 相似 之 处 ， 它 使 用 Node 的 流 API 读 取 文 件 ， 使 用 管道 在 函数 之 间 传 输 数 据 ， 最 终 
再 写 入 硬盘。 这 意味 着 Gulp 不 会 像 Grunt 那 样 出 现 因 频繁 操作 硬盘 引起 的 IO 问题 。 也 是 因为 IO 操 
作 所 用 的 时 间 更 少 ， 所 以 Gulp 运 行 速 度 比 Grunt 快 。 

Gulp 的 主要 缺点 是 过 渡 依 赖 流 、 管 道 和 异步 代码 。 别 误会 我 的 意思 了 ， 如果 在 Node 平 台中 开 
发 , 这 绝对 是 一 项 优势 。 但 问题 是 ， 如 果 你 或 你 所 在 的 团队 不 精通 Node, 那么 自己 编写 Gulp 任 务 
插件 的 话 ， 很 有 可 能 会 在 处 理 流 时 遇 到 问题 。 





































































































































































































Gulp 
Gulp 的 某 些 特性 很 好 : 
口 插件 的 质量 都 很 高 ; 
口 代码 驱动 的 Gulpfile.js 文 件 比 配置 驱动 的 Gruntfile.js 文 件 更 易于 理解 ; 
口 速度 比 Grunt 快 ， 因 为 Gulp 使 用 流 式 管 道 ， 不 会 每 次 都 读 写 硬盘 ; 
口 和 Grunt 一 样 ， 支 持 跨 平台 开发 。 
不 过 ，Gulp 也 有 一 些 缺点 : 
口 如 果 没 有 使 用 Node 的 经 验 ， 可 能 很 难 学 ; 
口 很 难 开 发 高 质量 的 插件 ， 原 因 同 上 ; 
口 团队 的 所 有 成 员 ( 现 有 成 员 和 未 来 加 入 的 成 员 ) 都 要 认同 流 和 异步 代码 ; 
口 任务 依赖 系统 还 有 很 多 不 尽 如 人 意 的 地 方 。 





在 团队 工作 中 使 用 Gulp 会 比 使 用 npm 更 合适 。 大 多 数 前 端 团队 或 许 都 了 解 JavaScript, 但 可 能 
不 熟悉 Bash 脚 本 , 而 且 有 些 团队 可 能 会 使 用 Windows。 因此 , 我 通常 建议 只 在 个 人 项 目 中 使 用 npm 
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run， 如 果 团 队 熟悉 Node， 或 许可 以 使 用 Gulp ， 其 他 所 有 情况 都 应 该 使 用 Grunt。 这 只 是 我 的 个 
人 观点 ,你 和 你 的 团队 要 找到 最 适合 自己 的 工具 ,而 且 , 不 要 因为 我 介绍 了 Grunt、Gulp 和 npm run， 
就 限制 了 选择 的 范围 。 你 自己 要 作 研 究 ， 或许 会 发 现 比 这 三 个 更 好 的 工具 。 

下 面 举 几 个 例子 ， 让 你 对 Gulp 的 任务 有 个 感性 的 认识 。 

1. 使 用 Gulp 运 行 测试 

Gulp 和 Grunt 一 样 ， 也 要 按 约定 行事 。Grunt 在 Gruntfile.js 文 件 中 定义 构建 任务 ， 对 Gulp 来 说 ， 
同样 作用 的 文件 名 为 Gulpfilejs。Gulp 和 Grunt 还 有 个 细微 区 别 : Gulp 的 CLI 和 任务 运行 程序 在 同 
一 个 包 中 ， 所 以 本 地 和 全 局 都 要 安装 gulp 包 。 

touch Gulpfile.js 


npm install -g gulp 
npm install --save-dev gulp 























我 们 先 创建 一 个 使 用 JSHint 检 查 JavaScript 文 件 的 Gulp 任 务 。 前 面 已 经 使 用 Grunt 和 npm run 
实现 了 相同 的 任务 。 对 Gulp 来 说 ， 为 了 使 用 JSHint， 我 们 要 安装 gulp-jshint 搬 件 : 


npm install --save-dev gulp-jshint 


现在 , 我们 全 局 安装 了 Gulp 的 CLI[， 也 在 本 地 安装 了 Gulp 和 gulp-jshint 择 件 ， 下 面 可 以 编 
写 构建 任务 运行 lint 程 序 了 。Gulp 的 构建 任务 要 在 Gulpfile.js 文 件 中 使 用 代码 编写 。 

我 们 要 使 用 gulp .task 方 法 ， 这 个 方法 的 第 一 个 参数 是 任务 名 称 ， 第 二 个 参数 是 一 个 函数 ， 
包含 执行 任务 所 需 的 全 部 代码 。 这 里 ， 我 们 要 使 用 gulp .src 方法 ， 流 式 读 取 源 文件 。 我 们 可 以 
分 别 指定 各 个 文件 的 路 径 ， 也 可 以 使 用 学 习 Grunt 时 提 过 的 那 种 通 配 模式 。 然 后 要 通过 管道 把 这 
个 流传 给 JSHint 插 件 。 我 们 可 以 配置 这 个 插件 ， 或 者 直接 使 用 默认 配置 。 最 后 ， 我 们 要 通过 管道 
把 JSHint 得 到 的 结果 传 给 报告 程序 ， 在 终端 里 打印 结果 。 实 现 上 述 几 步 操作 的 代码 如 下 列 
Gulpfile.js 文 件 所 示 : 

























































































var gulp = require('gulp'); 
var jshint = require('gulp-jshint'); 


gulp task(ttest;, function'()' 
ee , 个 、 Gulp 知 道 要 等 到 数据 售 
Sie (ssanpl ee 止 流动 之 后 再 返回 流 。 


.Dipe(jshint()) 
.pipe(jshint.reporter('default')); 
用 


注意 , 我 们 返回 的 是 流 ， 所 以 Gulp 知 道 ， 数 据 停止 流动 之 后 任务 才 算 结束 。 我 们 可 以 自 定义 
JSHint 使 用 的 报告 程序 ， 让 输出 的 结果 更 简洁 、 更 易于 阅读 。JSHint 的 报告 程序 没 必 要 制 成 Gulp 
插件 ， 因 此 我 们 可 以 使 用 jshint-stylish 等 包 。 下 面 我 们 在 本 地 安装 这 个 包 : 

npm install --save-dev jshint-stylish 


然后 修改 Gulpfilejs 文 件 ， 如 下 列 代码 所 示 。Gulp 会 加 载 jshint-stylish 模 块 ， 格 式 化 输 
出 的 报告 。 
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var gulp = require('gulp'); 
var jshint = require('gulp-jshint'); 


gulp.task('test', function () { 
return gulp 
.Src('./sample.js' 
.pipe (jshint ()) 
.pipe(jshint.reporter('jshint-stylish')); 
Fy3 


就 这 样 ， 编 写 名 为 Ltest 的 Gulp 任 务 只 需 做 这 么 多 。 假设 我 们 全 局 安装 了 Gulp 的 CLI， 那 么 可 
以 使 用 下 列 命令 执行 这 个 任务 : 

gulp test 

这 只 是 个 简单 的 示例 。 我 们 可 以 通过 管道 把 JSHint 得 到 的 结果 传 给 报告 程序 ， 在 终端 里 打印 
结果 ; 也 可 以 使 用 gulp .dest 方 法 , 创建 写 入 流 ,把 结果 写 入 硬盘 。 下 面 再 一 步 步 说明 如 何 编 写 
另 一 个 构建 任务 。 

2. 使 用 Gulp 构 建 库 

首先 我 们 来 执行 这 个 任务 最 基本 的 操作 一 一 使 用 gulp .src 方法 从 硬盘 中 读 取 文件 的 内 容 ， 
然后 通过 管道 把 源 文件 的 内 容 传 给 gulp .dest 方 法 , 写 人 和 硬盘。 其实 这 个 操作 就 是 把 文件 复制 到 
另 一 个 目录 中 。 


var gulp = require('gulp'); 



















































































gulp.task('build', function () { 
return gulp 
.Src('./sample.js' 
.pipe (gulp.dest('./build')); 
了 


现在 能 复制 文件 了 ,但 还 不 能 简化 内 容 。 为 了 简化 内 容 ,我 们 要 使 用 Gulp 插 件 。 这 里 ,我们 
可 以 使 用 gulp-uglify。 这 个 插件 使 用 的 是 流行 的 简化 程序 UglifyJS。 


var gulp = require('gulp'); 
var uglify = require('gulp-uglify'); 














gulp.task('build', function () { 
return gulp 
.Src('./sample.js' 
.pipe (uglify ()) 
.pipe (gulp.dest('./build')); 
} 3 


你 或 许 看 出 来 了 ， 在 流 中 可 以 添加 多 个 插件 ， 而 只 需 读 写 硬盘 一 次 。 我 们 再 添加 一 个 插件 ， 
gulp-size。 这 个 插件 会 计算 缓冲 中 内 容 的 长 度 , 然后 在 终端 里 打印 长 度 。 注意, 如 果 在 UglifyJS 
之 前 添加 这 个 插件 ,得 到 的 会 是 简化 前 的 长 度 ， 而 在 此 之 后 添加 ,得 到 的 会 是 简化 后 的 长 度 。 我 
们 也 可 以 在 前 后 都 添加 这 个 插件 。 
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var gulp = require('gulp'); 
Var uglify = require('gulp-uglify'); 
Var size = require('gulp-size'); 


gulp task ("Dulld,. funet1ion., (C).:{ 
return gulp 
.Src('./sample.js') 
.pipe (uglify ()) 
.pipe (size()) 
.bipe(gulp.dest('./build')); 
3 














为 了 增强 通过 管道 增删 内 容 的 能 力 ， 我 们 再 添加 最 后 一 个 捕 件 。 这 一 次 我 们 要 使 用 
gulp-headez 搬 件 ， 在 简化 后 的 代码 中 添加 许可 信息 ， 例 如 包 名 、 包 的 版 本 和 许可 类 型 。 在 命 








令 行 中 输入 gulp puild 命 令 可 以 执行 下 列 代码 清单 中 的 任务 。 
代码 清单 C.3 ”使 用 gulp-header 插 件 添加 许可 信息 


var gulp = require('gulp'); 

Var uglify = require('gulp-uglify'); 
Var size = require('gulp-size'); 

var header = require('gulp-header'); 
Var pkg = require('./package.json'); 


Var info = '// <%= pkg.name %>@v<%= pkg.version %>, <%= pkg.license %>\n'， 


gulp task(t"bDuild’ yy fuUnetiord. () ( 
return gulp 

.Src('./sample.js') 
.pipe (uglify ()) 
.pipe (header (info, { pkg : pkg })) 
.pipe (size()) 
.pipe(lgulp.dest('./build')); 

国友 


和 Grunt 类 似 ， 我们 可 以 把 一 组 任务 名 称 传 给 gulp .task 方 法 的 第 二 个 参数 ， 以 定义 流程 。 
在 这 方面 ，Grunt 和 Gulp 的 主要 区 别 在 于 ，Gulp 异 步 执行 各 个 任务 ， 而 Grunt 同 步 执行 各 个 任务 。 


gulp.task('build', ['build-js', 'build-css']); 


如 果 想 在 Gulp 中 同步 执行 任务 ,要 把 其 他 任务 声明 为 这 个 任务 的 依赖 ,然后 再 定 
执行 这 个 任务 时 ，Gulp 会 先 执行 依赖 的 任务 。 
gulp.task('build', ['dep'], function () { 


// 定义 依赖 于 dep 的 任务 
已 








这 篇 附录 只 想 告 诉 你 一 件 事 : 不 管 使 用 哪个 构建 工具 , 只 要 能 轻松 制定 所 需 的 构建 流 
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义 这 个 任务 。 


程 即 可 。 


JavaScript 代 码 质量 指南 














这 份 风格 指南 的 目的 是 为 应 用 的 JavaScript 代 码 提供 基本 准则 ， 让 团队 中 的 不 同 开发 者 编写 
可 读 性 和 一 致 性 都 较 高 的 代码 。 我 们 重点 关注 的 是 代码 质量 ， 以 便 让 应 用 的 不 同 部 分 之 间 具 有 
连贯 性 。 


D.1 模块 的 组 织 方式 


这 份 风格 指南 假定 你 使 用 了 某 种 模块 系统 ， 例 如 CommonJS"、AMD 或 ES6 模 块 等 。 第 
对 模块 系统 作 了 全 面 介绍 ， 如 果 你 想 了 解 ， 请 查看 那 一 章 了 解 详情 。 

模块 系统 能 提供 独立 的 作用 域 ,避免 泄漏 到 全 局 作用 域 中 ,而 且 还 能 自动 生成 依赖 图 ， 无需 
自己 手动 创建 多 个 <script> 标 签 ， 从 而 改进 代码 基 的 组 织 方式 。 

模块 系统 还 支持 依赖 注入 模式 ， 这 对 隔离 测试 单个 组 件 十 分 重要 。 


D.1.1 严格 模式 


在 模块 的 顶部 一 定 要 加 上 “use strict”。" 严 格 模式 能 捕获 莞 廖 的 行为 ,阻止 不 好 的 做 法 ， 
而 且 速 度 更 快 ， 因 为 在 严格 模式 中 编译 需 能 对 代码 作 些 假设 。 














Cn 





A 
草 












































D.1.2 空 


应 用 中 的 所 有 文件 应 该 使 用 一 致 的 空格 方式 。 为 此 ， 我 强烈 建议 使 用 EditorConfig 持 件 。 ”你 
需要 在 你 使 用 的 文本 编辑 器 中 安装 EditorConfig 插 件 ， 然 后 在 项 目 根 目 录 中 放 一 个 .editorconfig 文 
件 。 我 建议 使 用 下 列 代码 配置 JavaScript 的 缩 进 方式 : 


# editorconfig.org 
root = true 





























Q@ CommonJS 模 块 规范 的 地 址 是 http://bevacqua.io/bf/commonjs。 

@ RequireJS 的 网 站 中 有 篇 文章 全 面 说 明了 AMD 的 作用 ， 地 址 是 http://bevacqua.io/bf/amd。 

@ 现在 的 ES6 十 分 好 用 ， 详 情 参 见 http://bevacqua.io/bf/es6-intro。 

由 Mozilla 开 发 者 网 络 中 有 篇 文章 很 好 地 说 明了 JavaScript 的 严格 模式 ， 地 址 是 http://bevacqua.io/bf/strict。 
@) 如 果 想 进一步 了 解 EditorConfig， 请 访问 http://bevacqua.io/bf/editorconfig。 
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区 
indent_style = space 
indent_size = 2 
endq_of line = 1f 


charset = utf-8 


tim 
inser 
[tsind 
al 


trailing whitespace = true 
t_final_ newline = true 
] 


trailing whitespace = false 





EditorConfig 会 使 用 统一 的 方式 处 理 缩 进 ， 只 要 按 Tab 键 ,都 会 输入 适量 的 制 表 符 或 空格 。 缩 
进 使 用 制 表 符 还 是 空格 由 项 目的 具体 需求 而 定 ， 不 过 我 建议 使 用 两 个 空格 。 




















不 仅 缩 进 要 使 用 空格 ,函数 声明 的 参数 前 后 和 之 间 也 要 使 用 空格 。 这 种 空格 方式 往往 很 难 统 











一 ， 多 数 团队 其 至 无 法 制定 出 满足 所 有 人 需求 的 方案 。 


function () {} 





function( a, b ){} 


function(a, b) {} 


function (a,b) {} 











我 们 要 尽量 把 这 种 差异 降 到 最 低 ， 不 过 也 不 用 太 在 意 。 











为 了 提升 可 读 性 ， 要 尽 可 能 把 一 行 代码 的 长 度 控制 在 80 个 字符 以 内 。 





D.1.3 分 号 


自动 插入 分 号 ( Automatic Semicolon Insertion ， 简 称 ASI ) 不 是 特性 ， 不 要 依赖 它 。?ASI 特 
别 复杂 ?, 没 必要 让 团队 中 不 了 解 ASI 工 作 方式 的 开发 者 增加 负担 。 如 果 想 避免 出 现 令 人 头疼 的 问 
题 ， 请 远离 ASI， 始 终 在 需要 的 地 方 输入 分 号 。 


D.1.4 使 用 lint 程 序 检查 


因为 JavaScript 没 有 编译 这 一 步 ， 无 法 处 理 未 声明 的 变量 ， 所 以 必须 要 使 用 lint 程 序 检 查 






































JavaScript 代 码 。 我 要 再 次 提醒 ， 不 要 使 用 对 代码 风格 有 特殊 要 求 的 lint 程 序 ， 例 如 JSLint?。 我 们 
应 该 使 用 要 求 不 那么 严格 的 lint 程 序 ， 例 如 JSHint? 或 ESLint?。 下 面 是 一 些 关于 JSHint 的 小 贴 十 。 



































口 创建 .jshintignore 文 件 ， 写 人 node_modules 和 bower_components 等 目录 。 
口 可 以 使 用 类 似 下 面 的 .jshintrc 文 件 ， 在 一 个 地 方 统一 设 定 规则 : 





QD Ben Alman 在 一 篇 文章 中 很 好 地 说 明了 为 什么 不 能 省 略 分 号 ， 这 篇 文章 的 地 址 是 http://bevacqua.io/bf/semicolons。 
@) 有 篇 文章 详细 说 明了 ASI 的 内 部 机 制 ， 地 址 是 http://bevacqua.io/bf/asi。 

@ JSLint 是 最 早出 现 的 JavaScript lint 程 序 ， 现 在 还 可 以 在 线 使 用 ， 地 址 是 http://bevacqua.io/bf/islint。 

@ 如 今 开发 者 喜欢 在 构建 过 程 中 使 用 JSHint 代 替 JSLint。JSHint 的 项 目地 址 是 http://bevacqua.io/bf/jshint。 

@@ ESLint 也 是 一 种 lint 工 具 ， 目 的 是 减少 你 对 代码 风格 的 担忧 。ESLint 的 项 目地 址 是 http:/bevacqua.io/bfyeslint。 
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"curly": true, 
"eqeqeq": true, 
"newcap": true, 





"noarg": true, 
"noempty": true, 
"nonew": true, 
“sub true; 
"undef": true, 


"unused": true, 
"trailing": true, 
"boss": true, 
"eqnull": true, 
vetriett: tTrue 
"immed": true, 
"expr": true, 
"latedef": "nofunc", 
"quotmark": "single", 
"indent"™: 25 

"node": true 


} 

你 没 必要 非 使 用 这 些 规则 不 可 ， 但 是 也 不 能 完全 不 使 用 lint 程 序 检查 ， 我 们 的 目的 是 不 让 代 
人 码 风格 变 得 太 差 。 如果 不 检查 代码 ， 可 能 会 出 现 一 些 常 见 的 失误 , 例如 缺少 分 号 或 没 把 字符 串 放 
在 引号 中 。 但 如 果 过 度 检查 , 花 大 量 时 间 顾 虑 代码 风格 , 会 让 你 无 暇 考虑 如 何 编写 有 意义 的 代码 。 


D.2 字符 串 


字符 串 应 该 始终 使 用 相同 的 引号 ， 在 代码 基 中 统一 使 用 ' 或 "。 要 确保 团队 在 JavaScript 代 码 
的 所 有 地 方 都 使 用 同一 种 引号 。 
@ 不 好 的 字符 串 


























Var message = 'oh hai' + name + "!"; 

@ 好 的 字符 串 

Var message = 'oh hai ' + name + '!'; 

如 果 使 用 Node 中 通过 占 位 符 替 换 字符 串 的 方法 , 例如 util.format", 你 的 开发 工作 会 变 得 
更 轻松 ， 因 为 使 用 这 种 方法 更 容易 格式 化 字符 串 ， 而 且 代 码 看 起 来 更 简洁 。 

@ 更 好 的 字符 串 

Var message = util.format('oh hai %s!', name); 


我 们 可 以 使 用 下 列 代 码 实 现 相同 的 功能 : 


function format () { 
Var args = [].slice.call(arguments); 


























Q@ Node 中 util .format 方 法 的 文档 地 址 是 http://bevacqua.io/bf/util.format。 
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var initial = args.shift(); 
function replacer (text, replacement) { 
return text.replace('%s', replacement); 


return args.reduce (replacer, initial); 


潍 


写 多 行 字符 串 尤 其 是 HTML 片段 时 , 有 时 最 好 使 用 数组 作 缓 冲 , 然后 再 把 各 部 分 连接 起 来 。 
虽然 字符 串 拼 接 可 能 更 快 ， 但 难以 理解 。 
Yar tm 二 :|| 
UG 
format('<span class="monster">%s</span>', name), 
'</div>' 
eo 
使 用 这 种 数组 方式 ， 还 可 以 把 元 素 推 人 数组 ， 最 后 再 把 各 部 分 连接 起 来 。 字 符 串 模板 引擎 ， 
例如 Jade"， 通 常 都 会 这 么 做 。 









































D.2.1 变量 的 声明 方式 


我 们 应 该 始终 使 用 一 致 的 方式 声明 变量 , 而 且 要 在 所 属 作 用 域 的 项 部 声明 。 建议 一 行 上 只 声明 
一 个 变量 。 逗 号 放 在 开头 ， 在 一 个 var 语 句 中 声明 多 个 变量 ,或 者 使 用 多 个 var 语 句 都 行 ,但 在 
项 目 中 要 使 用 一 致 的 方式 。 为 了 保持 一 致 性 ， 要 确保 团队 中 的 每 个 人 都 遵守 这 份 风格 指南 。 

@ 不 一 致 的 声明 方式 























Var foo 

bar 

var baz; 

Var pony; 
var a 
a 


1 
2; 


或 


Var foo = 
Tf "(E60 次 
var bar 


} 


注意 ， 像 下 列 示 例 这 样 做 是 可 以 的 ， 不 仅 风 格 好 ， 而 且 使 用 的 语句 也 一 致 。 
@ 一 致 的 声明 方式 


IF 上 
es 





Nar -F000 
Yar bar = 27 
Var DA 

Var pony; 
var a; 














Q@ 如 果 想 学 习 Jade 模 板 引 警 的 详细 用 法 ， 请 访问 Jade 在 GitHub 中 的 仓库 ， 地 址 是 http:/bevacqua.io/bfyjade。 

















图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


附录 D JavaScript 代码 质量 指南 261 





var b; 

var £0600° 5 13 

var bar; 

宇和 写 -Y 计 
Da (eS. 2 


} 
声明 后 不 立即 赋值 的 变量 可 以 统一 放 在 一 行 。 
@ 可 以 接受 的 声明 方式 


D.3 条 件 语句 


在 条 件 语句 中 必须 使 用 花 括 号 。 花 括号 加 上 合理 使 用 的 空格 ， 能 避免 一 些 失 误 ， 例 如 Apple 
的 SSL/TLS 缺 陷 。” 
@ 不 好 的 条 件 语句 


if (err) throw err; 
@ 好 的 条 件 语句 


EE EEE tf 
throw err; 


} 

避免 使 用 == 和 != 运 算 符 ， 始 终 使 用 === 和 !==。 后 者 是 “严格 的 相等 性 运算 符 ”， 而 前 者 会 
试图 把 两 侧 的 操作 数 校 正 为 相同 的 类 型 。 如果 可 能 ， 应 该 把 单行 条 件 语句 写成 多 行 形式 。 

@ 不 好 的 相等 性 测试 会 强制 转换 类 型 

















function isEmptyString (text) { 
be = 0 kh ah a 二 全 7 

} 

isEmptyString(0); 

// <- true 


@ 好 的 相等 性 测试 使 用 严格 的 运算 符 


function isEmptyString (text) { 
return, Text ees "3 

isEmptyString(0); 

// <- false 





QD 有 一 份 详细 的 报告 说 明了 Apple 的 GOTO 语 句 失效 缺陷 ， 地 址 是 http://bevacqua.io/bf/gotofail。 
Q@ MDN 中 有 一 篇 专门 说 明 相等 性 运算 符 的 文章 ， 地 址 是 http://bevacqua.io/bf/equality。 
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D.3.1 三 元 运算 符 


作 清 晰 的 条 件 判 断 时 可 以 使 用 三 元 运算 符 ， 但 是 如 果 条 件 不 容易 理解 ， 则 不 能 使 用 。 通 常 ， 
如 果 一 眼 无 法 理解 三 元 运算 符 的 作用 ， 可 能 就 说 明 条 件 太 复杂 ， 不 适合 使 用 三 元 运算 符 。 

jQuery 是 一 个 很 好 的 例子 ， 其 代码 基 中 充斥 着 难以 理解 的 三 元 运算 符 。” 

@ 不 好 的 三 元 运算 符 用 例 
























































function calculate (a, b) { 
EtUuriy a BD Pl Tras L002 0. 
} 


二 A 入 


@ 好 的 三 元 运算 符 用 例 


function getName (mobile) { 
return mobile ? mobile.name : 'Generic Player'; 


} 
如 果 遇 到 不 容易 理解 的 情况 ， 应 该 使 用 if 和 else 语 人 句 。 


D.3.2 函数 








声明 函数 时 一 定 要 使 用 函数 声明 格式 ,“ 不 要 使 用 函数 表达 式 。” 如果 在 函数 表达 式 赋 值 给 变 
量 之 前 使 用 这 个 函数 会 出 错 ， 而 函数 声明 格式 定义 的 函数 会 提升 "到 作用 域 的 顶部， 因此 不 管 在 
什么 地 方 声明 函数 ， 函 数 都 会 正常 工作 。 第 5 章 对 作用 域 提 升 作 了 详细 说 明 。 

@ 使 用 表达 式 不 可 取 








var sum = function (x, y) { 
return x + y; 


} 
@ 使 用 声明 方式 可 取 


function sum (x, y) { 
return x + y; 


} 


不 过 ， 可 以 使 用 函数 表达 式 柯 里 化 另 一 个 函数 。” 
@ 可 以 使 用 表达 式 柯 里 化 











var plusThree = sum.bind(null, 3); 


记 住 ,使 用 函数 声明 格式 声明 的 函数 会 提升 “到 作用 域 的 项 部 ， 因 此 声明 的 顺序 不 重要 。 话 




















Q@ jQuery 的 这 些 代 码 就 滥用 了 三 元 运算 符 : http://bevacqua.io/bf/jquery-ternary。 

@ stackOverflow 中 有 一 个 问答 说 明了 不 同 的 函数 声明 方式 之 间 的 区 别 ， 地 址 是 http://bevacqua.io/bf/fn-declaration。 
@ MDN 中 有 一 篇 文章 对 函数 表达 式 下 了 简洁 的 定义 ， 地 址 是 http://bevacqua.io/bf/fn-expr。 

@ 本 书 配 套 源码 中 有 一 个 示例 详细 说 明了 变量 作用 域 的 提升 ， 地 址 是 http://bevacqua.io/bf/hoisting。 

@@ John Resig 在 他 的 博客 中 说 明了 如 何 使 用 偏 函数 ， 详 见 http://bevacqua.io/bf/partial-application。 

@ 本 书 配 套 源码 中 有 一 个 示例 详细 说 明了 变量 作用 域 的 提升 ， 地 址 是 http://bevacqua.io/bf/hoisting。 
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昌 如 此 ， 但 始终 应 该 在 顶层 作用 域 中 声明 函数 ， 不 能 在 条 件 语句 中 声明 。 
@ 这 样 声明 函数 不 可 取 


if (Math.random() > 0.5) { 
sum(1, 3); 
function sum (x, y) { 
return x + y; 
} 
} 


@ 这 样 声明 函数 可 取 


if (Math.random() > 0.5) { 
sum(1, 3); 

} 

function sum (x, y) { 
return x + y; 


} 
或 


function sum (x, y) { 
return x + y; 

} 

if (Math.random() > 0.5) { 
sum(1, 3); 

} 


如 果 需 要 “ 空 操作 ”的 方法 ,可 以 使 用 Function.prototype 或 function noop () 1{) 
声明 。 理 想 情 况 下 ， 一 个 应 用 中 只 能 有 一 个 noop 引 用 。 如 果 需 要 处 理 arguments 对 象 或 其 他 类 
似 数组 的 对 象 ， 应 该 将 其 校正 为 数组 。 

@ 这 样 遍 历 类 似 数组 的 对 象 不 可 取 





var divs = document .querySelectorAll('div'); 


for (i = 0; i < divs.length; i++) { 
console.log(divs[i].innerHTML); 


} 
@ 这 样 遍 历 类 似 数组 的 对 象 可 取 


var divs = document .querySelectorAll('div'); 

[] .slice.call (divs) .forEach(function (div) { 
console.log(div.innerHTML); 

全 


不 过 要 ， 在 V8 环 境 中 使 用 这 种 方式 处 理 arguments 对 象 对 性 能 有 重大 影响 。?" 如 果 你 很 
关注 性 能 ， A slice 方 法 校正 argument ss 对象， 应 该 使 用 for 循 环 处 理 。 

















Qa 这 篇 文章 很 好 地 说 明了 如 何 优 化 函数 参数 的 处 理 方式 : http://bevacqua.io/bf/arguments。 
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@ 不 好 的 参数 存 取 器 
var args = [].slice.call(arguments); 


@ 更 好 的 参数 存 取 器 


Var i; 

Var args = new Array (arguments.length); 

for (i = 0; i < args.length; i++) { 
args[i] = arguments [i]; 


} 
一 定 不 能 在 循环 内 部 声明 函数 。 
@ 在 行内 声明 函数 不 可 取 


Va valuesss:. ll, Dy 3]; 
var i; 
for (i = 0; i < values.length; i++) { 
setTimeout (function () { 
console.log(values[i]); 
} > O00 I) 
3 


或 


Var values: = [17 光村 
Var 
for (i = 0; i < values.length; i++) { 
setTimeout (function (i) { 
return function () { 
console.log(values[i]); 
} 
(i O00 ) 
} 


@ 把 函数 提取 出 来 更 好 


var values = [1, 2, 3]; 

var i; 

for (i = 0; i < values.length; i++) { 
wait (i); 


function wait (i) { 
setTimeout (function () { 
console.log(values[i]); 
}3. L000 RT 
} 


使 用 . forEach 方 法 更 好 ， 这 样 做 避免 了 在 for 循 环 中 声明 函数 的 缺点 。 
@ 使 用 函数 式 的 forEach 方 法 处 理 数组 更 好 








[Lr 2 3 forpEach(function TaTLUE i) { 
setTimeout (function () { 
console.log(value); 
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} O00 TL) 
ds 

@ 具名 函数 和 匿名 函数 

如 果 方 法 很 重要 , 应 该 使 用 具名 函数 表达 式 ， 而 不 能 声明 为 匿名 函数 。 这 样 在 分 析 堆 栈 跟 踪 
时 易于 查 明 导 致 异常 的 根本 原因 。 

@ 匿名 函数 不 可 取 











function once (fn) { 
var ran = false; 
return function () { 
if (ran) { return }; 
ran = true; 
fn.apply (this, arguments); 
je 
} 


@ 具名 函数 可 取 





function once (fn) { 
var ran = false; 
return function run () { 
if (ran) { return }; 
ran = true; 
fn.apply (this, arguments); 
} 


为 了 避免 缩 进 层级 太 深 ， 应 该 使 用 临界 子 句 (guard clause )， 而 不 要 骸 套 太 多 if 语 句 。 
@ 不 好 的 做 法 





(ay 
if (black) { 
if (turbine) { 
return 'batman!'; 


} 


或 


if (conditiony) 二 
// 10 多 行 代码 
} 


@ 好 的 做 法 


PE (Ea) 
return; 

} 

if (!black) { 
return; 


} 
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if (teine} 蒜 
return; 
} 


return 'batman!'; 
或 


if (!condition) { 
return; 

} 

// 10 多 行 代 码 


D.3.3 原型 


无 论 如 何 , 不 要 修改 原生 类 型 的 原型 ， 应 该 使 用 方法 。 如 果 必 须 扩 展 原 生 类 型 的 功能 ， 可 以 
使 用 poser”。poser 提 供 了 脱离 上 下 文 的 原生 类 型 引用 ， 可 以 放心 处 理 和 扩展 。 
@ 不 好 的 做 法 











String.prototype.half = function () { 
return this.substr(0, this.length / 2); 
} 


@ 好 的 做 法 


function half (text) { 
fretUrn text ,substr(0,, text.. Lenigth 7/ 2); 
} 
不 要 使 用 原型 继承 模型 除非 有 性 能 方面 的 原因 要 求 必须 这 么 做 : 
口 原型 继承 模型 比 使 用 纯 对 象 复杂 ; 
口 使 用 new 方 法 创建 对 象 时 ， 原 型 继承 模型 会 出 现 让 人 头疼 的 问题 ; 
口 在 原型 继承 模型 中 要 使 用 闭 包 隐 藏 实例 的 重要 私有 状态 ; 
口 还 是 使 用 纯 对 象 方便 。 


D.3.4 ”对象 字面 量 


使 用 古老 的 {} 符 号 实例 化 。 不 要 使 用 构造 方法 , 使 用 工厂 方法 。 通 常 推荐 使 用 以 下 方式 实现 
对 象 : 


funcGtlor util (GptLiSrns) Ht 

// 私有 方法 和 状态 

Var foo; 

function add () { 
return foott+; 

} 

function reset () { // 注意 , 这 不 是 公开 方法 
foo = options.start || 0; 


















































Q@ poser 提 供 了 脱离 上 下 文 的 原生 类 型 引用 ， 可 以 放心 处 理 和 扩展 。 详 情 访 问 http://bevacqua.io/bf/poser。 
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} 
reset (); 
return { 
// 公开 接口 中 的 方法 
uuid: add 
过 
} 


D.3.5 数组 字面 量 
使 用 方 括号 〈[] ) 实例 化 数组 。 如 果 考 虑 性 能 ， 需 要 声明 固定 长 度 的 数组 ， 可 以 使 用 new 


Array (length)。 
JavaScript 为 数组 提供 了 丰富 的 API, 应 该 合理 利用 。 你 可 以 先 学 习 处 理 数组 的 基本 方法 ,“ 然 
后 再 学 高 级 用 法 。 例 如 ， 可 以 使 用 .forEacn 方 法 迭代 集合 中 的 所 有 元 素 。 
下 面 列 出 了 可 对 数组 进行 的 基本 操作 。 
口 使 用 .push 方 法 把 元 素 插入 集合 的 末尾 ,使 用 .shi ft 方法 把 元 素 插 入 集合 的 开头 。 
口 使 用 .pop 方 法 获取 集合 中 的 最 后 一 个 元 素 ， 同 时 把 这 个 元 素 从 集合 中 删除 ; 使 
用 .unshift 方 法 对 第 一 个 元 素 执行 相同 操作 。 
口 使 用 splice 方 法 删除 指定 索引 范围 内 的 元 素 ， 或 者 在 指定 索引 处 插入 元 素 ， 或 同时 进行 
这 两 种 操作 。 
还 要 学 习 处 理 集合 的 函数 式 方法 。 相 比 自己 动手 处 理 , 使 用 这 些 方 法 能 节省 大 量 时间 。 下 面 
举例 说 明 使 用 这 些 方法 可 以 做 什么 。 
口 使 用 .filter 方 法 删除 没 用 的 值 。 
口 使 用 .map 方 法 修改 数组 中 元 素 的 值 。 
口 使 用 .reduce 方 法 迭代 数组 ， 生 成 单个 值 。 
口 使 用 .some 和 .every 方 法 判断 数组 中 的 元 素 是 否 满足 指定 的 条 件 。 
口 使 用 .sort 方 法 排列 集合 中 的 元 素 。 
口 使 用 .reverse 方 法 倒置 数组 中 元 素 的 顺序 。 
Mozilla 开 发 者 网 络 ( Mozilla Developer Network， 简 称 MDN ) 对 这 些 方法 作 了 详细 说 明 ， 而 
且 还 有 很 多 其 他 内 容 。MDN 的 网 址 是 https:/developermozilla.org/。 




































































D.4 正则 表达 式 


把 正则 表达 式 保存 在 变量 中 ， 不 要 在 行内 直接 使 用 。 这 么 做 能 极 大 地 提升 可 读 性 。 
@ 正则 表达 式 不 好 的 用 法 
if (/\d+/.test (text)) { 


console.log('so many numbers!'); 


} 
































我 的 博客 中 有 篇 介绍 JavaScript 数 组 的 文章 ， 地 址 是 http:/Vbevacqua.io/bfrarrays。 





图 灵 社 区 会 员 波 波 同学 仔 (578344975@qq.com) 专 享 尊重 版 权 


268 附录 D JavaScript 代码 质量 指南 





@ 正则 表达 式 好 的 用 法 


Var numeric = /\d+/; 
if (numeric.test (text)) { 
console.log('so many numbers!'); 


} 

你 可 以 学 习 如 何 编写 正则 表达 式 ，? 理 解 其 作用 。 也 可 以 使 用 在 线 工具 形象 化 理解 正则 表 
达 我 。 人 
D.4.1 调试 用 语句 


最 好 把 console 语 句 放 到 服务 中 ,以 便 能 轻易 在 生产 环境 中 将 其 关闭 。 或 者 , 在 生产 环境 使 
用 的 构建 版 本 中 不 要 包含 输出 日 志 的 console. log 语 句 。 

















D.4.2 注释 

注释 不 是 用 来 说 明代 码 的 作用 的 。 好 的 代码 应 该 不 解 自 明 。 如 果 你 想 编写 注释 说 明 一 段 代码 
的 作用 ， 可 能 就 说 明代 码 本 身 需要 修改 。 不 过 ,可 以 使 用 注释 说 明正 则 表达 式 的 作用 。 好 的 注释 
应 该 说 明 目 的 不 是 很 清晰 的 代码 为 什么 做 某 件 事 。 

@ 不 好 的 注释 

// 创建 居中 的 容器 

Var Be (ee 


p.center (div); 
p.text('foo'); 























@ 好 的 注释 
Var container = $('<p/>'); 
Var contents = 'foo'; 


container.center (parent); 

container.text (contents); 

megaphone.on('data', function (value) { 

container.text (value); // megaphone 定 期 更 新 容器 里 的 内 容 
总 


或 
Var numeric = /\d+/; // 字符 串 中 的 一 个 或 多 个 数字 
if (numeric.test (text)) { 


console.log('so many numbers!');} 


} 
不 要 注释 掉 整 段 代 码 ， 此 时 应 该 使 用 版 本 控制 系统 。 

















我 的 博客 中 有 一 篇 介绍 正则 表达 式 的 文章 ， 地 址 是 http://bevacqua.io/bf/regex。 
@ 使 用 Regexper 可 以 形象 化 理解 正则 表达 式 的 作用 ， 这 个 工具 的 地 址 是 http://bevacqua.io/bf/regexper。 
































Hl 
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D.4.3 变量 的 名 称 


必须 为 变量 起 有 意义 的 名 称 , 这 样 就 无 需 查 看 注释 弄 清 代 码 的 功能 了 。 试 着 使 用 简洁 有 表现 
力 且 有 意义 的 变量 名 。 
@ 不 好 的 名 称 














function.a (x 7 2} 
return Zz * yy x; 


J 
@ 好 的 名 称 


function ruleOfThree (had, got, have) { 
return have * got / had; 

} 

ruleOofThree(4, 2, 6); 

LY 3 


D.4.4 “腻子 脚本 


肛 子 脚本 是 一 段 代码 ,其 作用 是 让 应 用 在 旧 浏 览 器 中 使 用 新 功能 。 我们 要 尽量 使 用 浏览 器 原 
生 的 实现 ,然后 引入 展 子 脚本 ， 为 不 支持 的 浏览 器 提供 相同 的 行为 。 这 样 写 出 的 代码 易于 使 用 ， 
而 且 不 用 花 太 多 时 间 处 理 棘 手 的 问题 。 

如 果 使 用 腻子 脚本 不 能 修补 某 个 功能 ,要 使 用 全 局 可 用 的 方式 包装 用 到 的 所 有 补丁 代码 , “以 
便 在 整个 应 用 中 使 用 。 


D.4.5 ”日常 技巧 


@ 设 定 默认 值 
使 用 |1 设 定 默 认 值 。 如 果 左 边 是 假 值 , “就 使 用 右边 的 值 。 
function a (value) { 

var defaultValue = 33; 


var used = Value || defaultValue; 


. 
@ 通过 binq 方 法 使 用 偏 函 数 
通过 .bind 方 法 使 用 偏 函数 :“ 
























































Q@ Remy Sharp 对 腻子 脚本 作 了 简单 的 说 明 : http://bevacqua.io/bf/polyfill。 

@@ 我 写 过 一 篇 介绍 如 何 编写 高 质量 模块 的 文章 ， 其 中 谈 到 了 包装 实现 这 个 话题 ， 这 篇 文章 的 地 址 是 http:/bevacqua 
io/bfhq-modules 。 

@ 在 JavaScript 的 条 件 语句 中 ， 假 值 被 视 作 false。 假 值 包括 : ''、null 、undqefineda 和 0。 详 细 信息 请 访问 
http://bevacqua.io/bf/casting。 

由 因 开发 jQuery 出 名 的 John Resig 写 了 一 篇 介绍 JavaScript 偏 函数 的 文章 ,地 址 是 http://bevacqua.io/bf/partialapplication。 
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function sum (a, b) { 
return a + b; 
} 
var addSeven = sum.bind(null, 7); 
addSeven (6); 
// <- 13 
@ 使 用 Array .prototype.slice.call 把 类 似 数组 的 对 象 校正 为 数组 


使 用 Array .prototype.slice.call 把 类 似 数 组 的 对 象 校正 为 真正 的 数组 : 
Var args = Array.prototype.slice.call (arguments); 


@ 在 所 有 地 方 使 用 事件 发 射 器 
在 所 有 地 方 使 用 事件 发 射 器 ! “这 个 模式 在 不 同 的 对 象 或 不 同 的 应 用 层 之 间 发 送 消 息 ， 解 看 


Wy 











var emitter = contra.emitter(); 

body.addEventListener('click', function () { 
emitter.emit('click', e.target); 

} 

emitter.on('click', function (elem) { 
console.log(elem); 

J 

// 模拟 点 击 

emitter.emit('click', document .body); 


@ 把 Function.prototype 当 作 空 操作 


把 Function.prototype 当 作 “ 空 操作 ”使 用 : 


function (cb) { 
setTimeout (cb || Function.prototype, 2000); 


} 








Q@ contra 实 现 了 易于 使 用 的 事件 发 射 器 ， 这 个 库 的 地 址 是 http://bevacqua.io/bf/contra.emitter。 
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延 展 阅读 


作为 JavaScript 技 术 经 典 名 著 ，《JavaScript 高 级 程序 设计 ( 第 3 版 ) 》 承 继 了 之 前 版 本 全 
面 深入 、 贴 近 实战 的 特点 ， 在 详细 讲解 了 JavaScript 语 言 的 核心 之 后 ， 条 分 缕 析 地 为 读者 
展示 了 现 有 规范 及 实现 为 开发 Web 应 用 提供 的 各 种 支持 和 特性 。 
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说 到 学 习 AngularJS， 相 信 你 早已 厌倦 了 上 网 搜索 、 断 续 阅 读 的 低 效 方式 。 本 书 堪 称 An- 
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gularJS 领 域 的 里 程 碑 式 著作 ， 它 以 相当 的 篇 幅 涵盖 了 关于 AngularJS 的 几乎 所 有 内 容 ， 
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本 书 是 经 典 JavaScript 入 门 书 ， 全 球 累 计 销量 已 超 20 万 册 。 书 中 从 JavaScript 语 言 基 础 
始 ， 分 别 讨论 了 图 像 、 框 架 、 浏 览 口 、 表 单 、 正 则 表达 式 、 用 户 事件 和 cookie 等 ， 
循序 渐进 地 讲述 了 JavaScript 及 相关 的 CSS、DOM、Ajax、jQuery 等 技术 。 内 容 讲解 透 
彻 ， S pi: 茂 。 
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延 展 阅读 


Er 很 多 人 对 JavaScript 这 门 语言 的 印象 都 是 简单 易学 ， 很 容易 上 手 。JavaScript 语 言 本 身 有 很 
国 ma 多 复杂 的 概念 ， 语 言 的 使 用 者 不 必 深入 理解 这 些 概念 也 可 以 编写 出 功能 全 面 的 应 用 。 殊 不 

你 不 知道 的 知 ， 这 些 复杂 精妙 的 概念 才 是 语言 的 精髓 ， 即使 是 经 验 丰富 的 JavaScript 开 发 人 员 ， 如 果 

没有 认真 学 习 的 话 也 无 法 真正 理解 它们 。 在 本 书 中 ， 我 们 要 直面 当前 JavaScript 开 发 者 不 
JavaScript :se。 | 。 来 其 解 的 大 趋势 ， 深 入 理解 语言 内 部 的 机 制 。 
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Node.js 核 心 框架 贡献 者 代表 作 ，Node.js 项 目 负责 人 、Node 包 管理 器 作者 力荐 ! 

本 书 向 读者 展示 了 如 何 构建 产品 级 应 用 ， 对 关键 概念 的 介绍 清晰 明了 ， 贴 近 实际 的 例子 ， 洒 
盖 从 安装 到 部 署 的 各 个 环节 ， 是 一 部 讲解 与 实践 并 重 的 优秀 著作 。 通 过 学 习 本 书 ， 读 者 将 深 
入 异步 编程 、 数 据 存储 、 输 出 模板 、 读 写 文件 系统 ， 掌 握 创 建 TCP/IP 服 务 器 和 命令 行 工 
等 非 HTTP 程 序 的 技术 。 本 书 同样 非常 适合 熟悉 Rails、Django 或 PHP 开 发 的 读者 阅读 学 习 。 
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jQuery 领域 标杆 之 作 ， 以 实例 驱动 ， 系 统 全 面 讲解 -Query、jQuery UI 以 及 jQuery Mobile。 

作为 一 款 优秀 的 JavaScript 框 架 ，jQuery 具 有 表达 能 力 强 、 支 持 一 次 处 理 多 个 元 素 、 能 

Bo 决 不 同 浏览 器 的 兼容 性 问题 等 诸多 优点 ， 从 而 受到 广大 Web 开 发 人 员 的 追捧 。 本 书 是 一 
Hs 全 面 的 jQuery 手册 ， 详 尽 介绍 了 jQuery 库 、jQuery UI 和 jQuery Mobile， 能 帮助 具备 
通 jQuer | 

精 jQ y Web 开 发 基础 知识 的 读者 精通 jQuery。 
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jQuery API 网 站 维护 者 亲自 撰写 ， 第 一 版 自 2008 上 市 以 来 ， 一 版 再 版 ， 累 计 重 印 14 次 ， 
是 国内 首屈一指 的 jQuery 经 典 著作 | 
注重 理论 与 实践 相 结 合 ， 由 浅 入 深 、 循 序 渐进 ， 适 合 各 层次 的 前 端 Web 开 发 人 员 学 习 和 人 参考。 
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微 博 联系 我 们 
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官方 账号 : @ 图 灵 教 育 @ 图 灵 社 区 @ 图 灵 新 知 
市 场合 作 : @ 图 灵 责 野 
写作 本 版 书 ，@ 图 灵 小 花 @ 图 灵 张 起 
翻译 英文 书 ，@ 朱 峙 ituring @ 楼 伟 珊 
翻译 日 文书 或 文章 ，@ 图 灵 乐 区 
翻译 韩文 书 ， @ 图 灵 陈 曦 

电子 书 合作 ，@hi_jeanne 

图 灵 访 谈 /《 码 农 》 杂 志 :， @ 李 盼 ituring 
加 入 我 们 ，@ 王 子 是 好 人 
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大 多 数 应 用 的 命运 在 一 行 代码 都 没 编写 之 
前 就 已 注定 了 。 为 什么 呢 ? 很 简单 ， 设 计 得 不 
好 ， 自 然 结果 也 不 好 。 应 用 的 基础 是 好 的 设计 
和 有 效 的 过 程 ， 在 此 之 上 才能 构建 、 扩 展 和 改 
进 应 用 。 为 了 改进 开发 过 程 ，JavaScript 开 发 
者 要 发 掘 工 具 、 现 代 化 的 库 和 架构 模式 。 

本 书 介绍 了 用 于 提升 应 用 质量 和 改进 开发 
流程 的 技术 。 首 先 会 教 你 如 何 制定 能 优化 产品 
质量 的 过 程 ， 制 定好 过 程 后 ， 每 次 修改 代码 后 
ate 每 次 提交 后 都 会 运行 测 
试 ， 还 能 自动 部 署 。 本 书 还 会 集中 介绍 如 何 设 
ea 以 及 如 何 使 用 这 些 组 件 构 建 
健壮 的 应 用 。 


本 书 主要 内 容 : 
@ 自动 化 开发 、 测 试 和 部 署 过 程 
@ JavaScript 基 础 知识 和 模块 化 最 佳 实践 


@ 开发 模块 化 、 可 维护 且 经 过 充分 测试 的 
应 用 


@ 掌握 异步 流程 ， 理 解 MVC 模 式 ， 设 计 
REST API 


属 目 AN NiNk 
ee iTuring.cn 
热线 : (010)51095186 转 600 


分 类 建议 





人 民 邮 电 出 版 社 网 址 ; Www. 交 com.cn 





“享受 这 有 段 改进 进 开发 流程 的 旅程 吧 ! 冯 
一 一 Addy Osmani， 谷 歌 公司 


“JavaScript 开 发 者 必 读 的 一 本 书 ! ” 
一 一 Stephen Wakely， 汤 森 路 透 公 司 


“现代 JavaSc ript 生 态 态 系 统 这 一 迷宫 的 优 


“第 一 本 为 开发 人 员 写 的 设计 书 。 
一 一 Sandeep Kumar Patel|，SAP 实 验 室 


“向 JavaScript 开 发 者 全 面 介 绍 了 现代 
2 二 丰 EE AS 
一 一 Matthew Merkes，MyNeighbor 公 司 
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看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 
译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 
在 这 可 以 找到 我 们 : 


微 博 @ 图 灵 教育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 
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